最大高度过渡从 0 到自动或无

Question

我有一个带有max-height of 0的元素。我想将其转换为无最大高度自动或无;无论什么使它根据存在的元素数量进行扩展。我还不想使用 JS 或 flex。

这是jsfiddle：https://jsfiddle.net/m9pd8bjh/19/

.HTML：

<nav>
  <input type="checkbox" id="menu-main-checkbox" hidden>
  <label class="toggler" for="menu-main-checkbox">Menu</label>
  <div class="hide toggleable">
    <ul>
      <li>Home</li>
      <li>Sample Page</li>
    </ul>
  </div>
</nav>

.CSS：

.hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  max-height: 68px;
}
.toggleable {
  transition: visibility 1.5s ease-in-out, max-height .75s ease-in-out;
}
.toggler {
  cursor: pointer
}
nav {
  background: #e74c3c;
}

当我将最大高度设置为 68px（高度适合两个列表项）时，它工作得很好，但是当我将最大高度设置为 500px 时，例如，为将来的列表项留出空间，从 500 过渡到 0 需要时间，使其在列表项再次消失之前出现延迟。

我

不想使用缩放，因为它会使它复杂化，我必须想出一个解决方案来解决它下面的间距。它保留元素下方的间距，并将其保留到打开时。

Answer 1

我发现的一种解决方法是将动画与@keyframes一起使用。请记住添加供应商前缀。

浏览器对此的支持如下：火狐 5+， IE 10+， 铬， 野生动物园 4+， 歌剧 12+

我将您的 CSS 修改为：

 .hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}
input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  animation: height1 .75s forwards;
}
input[type=checkbox]:not(:checked)~.toggleable {
  visibility: visible;
  animation: height2 .50s forwards;
}
.toggleable {
  transition: visibility 1.5s ease-in-out;
}
.toggler {
  cursor: pointer
}
nav {
  background: #e74c3c;
}
@keyframes height1 {
  0%   { max-height: 0; }
  100% { max-height: 500px; }
}
@keyframes height2 {
  0%   { max-height: 500px; }
  100% { max-height: 0; }
}

如果这样使用，再次单击时延迟会更小。

这是更新的jsfiddle：https://jsfiddle.net/m9pd8bjh/25/