css - 高度为 : auto 的滑入式 CSS3 动画

Question

我希望我的 block 元素看起来好像高度正在增长到其最大值(如 JQuery's progressive show )，垂直“插入”它后面的任何元素随着它的增长而平稳地增长。

使用固定的 height 很容易(让 max-height 从 0 到想要的大小)，但是使用 height: auto 就不行了，因为你不能让 max-height 从 0 变为 none(该元素一直都是 0px 高，然后突然出现在动画的 100% 处)。

我已经尝试将 transform 从 scaley(0) 调整为 scaley(1) 但高度自动从过渡的开始(所以插入元素之后的内容被粗暴地向下移动，而不是平滑的、渐进的推送)。

Answer 1

您可以在任何内容之前使用“推送”元素(或伪元素)。

<div class="container open">
    <div class="pusher"></div>
    ... the rest of the unknown height content
</div>

然后转换 pusher 的边距。

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }