带高度的CSS3动画中的幻灯片：自动

我希望我的块元素看起来像是高度增长到了最大值（如），垂直地“推动”后面的任何元素，使其在增长时平滑

固定的

高度

（使

最大高度

从0变为所需大小）很容易，但

高度：自动

则不容易，因为你无法使

最大高度

从0变为

无

（元素一直都是0px高，然后突然出现在100%的动画中）

---

我尝试过将

transform

从

scaley（0）

调整到

scaley（1）

，但高度从转换开始就自动“保留”（因此插入元素后的内容被粗暴地向下移动，而不是平滑、渐进地推动）.

解决方案是单独变换所有应该移动的元素（也就是对元素后面的内容添加另一个变换）。一般来说，你不能依靠变换的自动回流。

迈克尔是对的，任何应用“自动”值的东西都不会清晰地显示动画。您必须设置定义的高度。我在这里对Duopixel的JSFIDLE做了一些更改：

---

如果您想使每个元素的高度完美，那么必须对每个元素应用类，并为每个元素指定一个高度。链接设置最大元素的高度。

这似乎是模拟高度的最佳解决方案。

height:auto可以改为设置
最大高度的动画。我已经更新了DuMaurier的小提琴，它似乎在工作：

我首先将
max height
设置为默认值，然后将其转换为
：hover
设置为比盒子需要的更大的值，
500px
。这是我第一次处理CSS转换，所以我可能错过了一些关键的东西

更新：好的，我会留下这个，但是它大部分是一个坏主意。问题在于，过渡时间与
max height
的完整值相关联，因此，除非内容的实际高度非常接近
max height
的值，否则动画看起来会发生得太快。奇怪的是，当从高
max height
移动时，转换需要预期的时间。不知道为什么会这样。此外，缓和也不会正确显示。
您可以在任何内容之前使用“pusher”元素（或伪元素）

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

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

代码。
这里有一个测试用例：，呃，看起来不太好，可能需要一些js来解决。我看不到自动高度，你能举个例子吗？
.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }