滑入CSS3动画,高度为：auto

我希望我的块元素看起来好像高度增长到最大值(如 JQuery’s progressive show),随着它的增长而平滑地“推动”任何元素.

固定高度(使最大高度从0变为所需大小)很容易,但不是高度：自动,因为你不能使最大高度从0变为零(元素将一直是0px高然后突然出现在100％的动画中).

我尝试了从scaley(0)到scaley(1)的范围转换,但是从转换开始时高度自动“保留”(因此插入元素之后的内容被粗暴地向下移动而不是平滑的渐进式推送).

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

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

然后转换推杆的边距.

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