滑入CSS3动画,高度为:auto

Question

我希望我的块元素看起来好像高度增长到最大值(就像JQuery的渐进式节目),随着它的增长而平滑地"推动"任何元素.

它很容易固定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>

然后转换推杆的边距.

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