css - 过渡固定位置元素高度

Question

我有一个 position: fixed; 导航栏，我想在点击超过 0.2 秒 时将其扩展到浏览器的高度。

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

示例/我尝试过的:

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

我在单击时添加类 .open，它具有属性 bottom: 0。 Bottom 是一个可动画的属性，但问题是我还没有为它设置一个值来为 from 设置动画。我唯一的选择是使用 JS 来计算 bottom 在“关闭”时应该是什么吗？

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

Answer 1

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

给“open”div min-height: 100%

由于您没有手动设置高度，“封闭”导航将从其内容中获取高度，这比在 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%;
}