如何动画底部:值到底部:自动

Question

我正在尝试创建一个隐藏在文档顶部屏幕外的菜单.有一小部分显示将是可以收集的,这将使菜单的其余部分进入视图.试图将底部动画为自动但不起作用.想知道是否有人知道如何或更好的方式在屏幕上创建类似于我的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;
}

Answer 1

正如Patrick Allen在评论中已经提到的那样,您无法使用CSS动画/转换为"自动"值或转换为"自动"值.对于您的情况,您可以使用transform: translate()下面的代码片段替换它,并获得相同的效果.

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

• 该transform: translateY(-100%)移动由所述容器元件的确切高度的元素含量向上.这会隐藏整个容器.
• top: 39px添加A 使得仍然显示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>