如何为底部动画：从值到底部：自动 [英] How to animate bottom: value to bottom: auto

问题描述

我正在尝试创建一个菜单，该菜单隐藏在文档顶部的屏幕外。有一小部分显示将可悬停，这将使菜单的其余部分可见。尝试为底部设置动画以使其自动旋转，但无法正常工作。想知道是否有人知道如何或更好的方法在屏幕外创建类似于我的Codepen的菜单。

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 是给我动画问题的类。

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

推荐答案

正如Patrick Allen所述在注释中，您无法使用CSS从自动值设置动画或从中转换到自动值。对于您的情况，可以将其替换为 transform：translate（），如下面的代码片段所示，并获得相同的效果。

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.

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

Below is the relevant SCSS code and what it does:

• code> transform：translateY（-100％）将元素内容向上移动容器元素的确切高度。这样会隐藏整个容器。


• A top：39px 被添加，使得人字形图标仍然显示，只显示内容


• 悬停时，通过执行 transform来使转换无效：translationY（0％）。


• 但是由于 top：39px 处于未悬停状态，因此该元素的位置容器会稍微偏移一点，可以通过在悬停时添加 top：0px 来抵消。

• 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>

这篇关于如何为底部动画：从值到底部：自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！