Question

我希望我的块元素看起来好像高度增长到最大值（如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>

然后转移推杆的边距。

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

Answer 2

解决方案是单独转换所有应该移动的元素（也就是将另一个转换添加到元素之后的内容）。通常，您不能依赖变换自动重排。

Answer 3

迈克尔是对的，任何东西都应用“自动”值，不会干净利落。你必须设定定义的高度。我在这里对Duopixel的jsfiddle进行了一些更改：http://jsfiddle.net/joshvogt/vjXuH/

如果您希望高度适合每个元素，则必须将类应用于每个元素并为每个元素指定高度。该链接设置最大元素的高度。

Answer 4

似乎模拟height: auto;的最佳解决方案可能是为max-height设置动画。我已经更新了DuMaurier的小提琴，它似乎正在起作用：http://jsfiddle.net/8JLKA/1/

我开始时将max-height设置为默认设置，然后将其:hover转换为比框所需的更大的值500px。这是我第一次搞乱CSS转换，所以我可能会遗漏一些关键的东西。

更新：好的，我会离开这个，但它 一个坏主意。问题是转换时间与max-height的完整值相关联，因此，除非内容的实际高度非常接近max-height的值，否则动画看起来会发生得太快。奇怪的是，当离开高max-height时，过渡需要预期的时间量。不知道为什么会这样。此外，宽松也不会正确显示。

Answer 5

Responsive Nav使用另一种技术，它使用JavaScript计算目标高度，然后创建max-height从0到结果值的转换。

代码here。

滑入CSS3动画，高度为：auto

5 个答案: