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;
}

回答1:

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>

回答2:

$('#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

回答3:

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

来源：https://stackoverflow.com/questions/32163601/how-to-animate-bottom-value-to-bottom-auto

标签

css

css3

css-transitions

css-animations