CODEWITHSUNDEEP
csscss-transitionscss-animations
anthony-dandrea
anthony-dandrea

Reputation: 2823

How to animate bottom: value to bottom: auto

I'm trying to create a menu that is hidden off screen on the top of the document. There is a little portion showing that will be hoverable which will bring the rest of the menu into view. Trying to animate bottom to auto but it isn't working. Was wondering if someone knows how or better way to create a menu off screen similar to my codepen.

http://codepen.io/anthony-dandrea/pen/EjqYqj

.hud is the class that's giving me the animation problem.

.hud {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: all 1s;
  bottom: calc(100% - 39px);
}
.hud:hover {
  bottom: 80%;
  bottom: auto;
}

Upvotes: 4

Views: 12863

Answers (3)

Masoom
Masoom

Reputation: 731

Give top: 0; to .hud element and it will work fine. Here is the codepen: http://codepen.io/anon/pen/KpOKdE

Upvotes: 0

Harry
Harry

Reputation: 89790

As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with transform: translate() like in the below snippet and achieve the same effect.

Below is the relevant SCSS code and what it does:

  • The transform: translateY(-100%) moves the elements content upwards by the exact height of the container element. This would hide the whole container.
  • A top: 39px is added such that the chevron icon is still shown and only the content is hidden.
  • On hover the transform is nullified by doing transform: translateY(0%). This puts the element back in its original position.
  • But because of the top: 39px present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding top: 0px on hover.
.hud {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: all 1s;
  top: 39px;
  transform: translateY(-100%);
  &:hover {
     top: 0px;
     transform: translateY(0%);
  }
}


body {
  background: #121111;
}
.hud {
  position: absolute;
  color: red;
  width: 100%;
  text-align: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  top: 39px;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.hud:hover {
  top: 0px;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.pull-down {
  color: #e6e6e6;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  height: 24px;
  margin-top: 15px;
  font-size: 1.5em;
}
.pull-down:hover {
  color: #fff;
}
.hud:hover .pull-down {
  color: #fff;
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="hud">
  <div class="hud-internal">
    <p>foobar</p>
  </div>
  <i class="fa fa-chevron-down pull-down" data-hud-toggle></i>
</div>

Upvotes: 11

Dr.Tricker
Dr.Tricker

Reputation: 553

$('#click').click(function () {

    var windowHeight = $(window).height();
    var lineHeight = $('#line').height();
    var desiredBottom = 100;

    var newPosition = windowHeight - (lineHeight + desiredBottom);

    $('#line').animate({top:newPosition},1000,function () {
        $('#line').css({
            bottom: desiredBottom,
            bottom: 'auto'
        });
    });

});

Here jsfiddle

Upvotes: 1

Related Questions