css - 使用不同数量的子项在 div 上设置动画高度

Question

我正在使用 nganimate 并在 div 的 max-height 属性上放置动画，如下所示:

CSS

.sublist.ng-hide {
  max-height: 0;
}

.sublist {
  max-height: 1300px;
  overflow: hidden;
  -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
  -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
  transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
}

html

<button ng-click="toggle=!toggle">{{toggle ? 'Hide' : 'Show'}} Items</button>
<div style="background-color:#fff; border: 1px black solid;" ng-show="toggle" class="sublist">
  <ul>
    <li ng-repeat="name in names">
      <a href="#"> {{name}} </a>
    </li> 
  </ul>
</div>

Working demo

我想知道是否有任何方法可以根据我正在单独使用 css 设置动画的 div 内子项的高度来设置 height\max-height？

此外，我注意到在 div 隐藏之前单击演示中的按钮时会出现延迟。是否可以让 div 在单击按钮时立即折叠？

Answer 1

我试过你的演示。通过设置 max-height auto 就像一个魅力。

见下文: https://plnkr.co/edit/dJLre1RYNRPafikxcuD3?p=preview

.sublist {
  max-height: auto;
  overflow: hidden;
  -webkit-transition: 0.5s ease-in all;
  -moz-transition: 0.5s ease-in all;
  transition: 0.5s ease-in all;
}