我有一个position: fixed;导航栏,我想在0.2秒内将其扩展到浏览器的高度。

您可以通过单击此页面上的“汉堡”来查看所需效果的示例:http://iamwilliamstern.com/

示例/我尝试过的方法:

这是我尝试执行的示例代码笔:
http://codepen.io/donpinkus/pen/qaodzP

单击时添加类.open,该类具有属性bottom: 0。 Bottom是可设置动画的属性,但问题是我尚未为其设置动画值。我的唯一选择是使用JS计算bottom在“关闭”时应该是什么吗?

我假设有一个CSS唯一选项可以使事情顺利进行。

最佳答案

给“封闭”的div一个min-height: 1px

给“打开”的div一个min-height: 100%

由于您不是手动设置height,因此“封闭”导航将从其内容获取高度,这比在CSS中手动设置高度更好。

此处的示例:http://codepen.io/donpinkus/pen/amYvkL

div {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s ease-in-out;
  min-height: 20px; // This gets animated
}

.open {
  min-height: 100%;
}

10-07 19:05
查看更多