如何为底部设置动画：值到底部：自动答案

【问题标题】：How to animate bottom: value to bottom: auto如何为底部设置动画：值到底部：自动
【发布时间】：2015-12-15 15:29:53
【问题描述】：

我正在尝试创建一个隐藏在文档顶部屏幕外的菜单。有一小部分显示可以悬停，这将使菜单的其余部分进入视图。试图将底部动画设置为自动，但它不起作用。想知道是否有人知道如何或更好的方法来创建类似于我的 codepen 的屏幕外菜单。

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

.hud 是给我动画问题的类。

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

【问题讨论】：

您不能使用纯 CSS 为“自动”设置动画。

标签： css css-transitions css-animations

【解决方案1】：

正如 Patrick Allen 在 cmets 中已经提到的，您不能使用 CSS 动画/过渡到“自动”值。对于您的情况，您可以将其替换为transform: translate()，如下面的 sn-p 并达到相同的效果。

以下是相关的 SCSS 代码及其作用：

transform: translateY(-100%) 将元素内容向上移动容器元素的确切高度。这将隐藏整个容器。
添加了top: 39px，因此 V 形图标仍会显示，只有内容被隐藏。
悬停时，transform 通过执行transform: translateY(0%) 无效。这会将元素放回其原始位置。
但由于 top: 39px 处于未悬停状态，容器的位置会稍微偏移，可以通过在悬停时添加 top: 0px 来取消。

.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'
        });
    });

});

这里jsfiddle

【讨论】：

【解决方案3】：

将top: 0; 给.hud 元素，它会正常工作。这是代码笔：http://codepen.io/anon/pen/KpOKdE

【讨论】：