我有一个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%;
}