具有高度的滑入 CSS3 动画：自动答案

【问题标题】：Slide-in CSS3 animation with height: auto具有高度的滑入 CSS3 动画：自动
【发布时间】：2011-06-20 19:59:41
【问题描述】：

我希望我的块元素看起来好像高度增长到最大（如JQuery's progressive show），随着它的增长，垂直“推动”任何元素。

固定height（使max-height从0变为想要的大小）很容易，但不使用height: auto，因为你不能使max-height从0变为none（元素会一直是 0px 高然后突然出现在动画的 100% 处）。

我尝试将transform 的范围从scaley(0) 到scaley(1)，但高度从过渡开始时自动“保留”（因此插入元素后的内容被粗暴地向下移动，而不是平滑、渐进的推）。

【问题讨论】：

这是一个测试用例：jsfiddle.net/duopixel/ZMc5B，呃，看起来不太好，可能需要一些js来解决。

标签： css webkit css-transitions

【解决方案1】：

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

【讨论】：

我没有看到自动高度，你能举个例子吗？

【解决方案2】：

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

如果你想让每个元素的高度都完美，你必须为每个元素应用类并为每个元素指定一个高度。链接设置最大元素的高度。

【讨论】：

【解决方案3】：

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

我一开始将max-height 设置为默认值，然后在:hover 上将其转换为比盒子需要的更大的东西500px。这是我第一次搞乱 CSS 过渡，所以我可能遗漏了一些重要的东西。

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

【讨论】：

【解决方案4】：

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

<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%; }

【讨论】：

【解决方案5】：

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

代码here。

【讨论】：