带有高度的自由滑动CSS3动画：自动

问题描述：

我希望自己的块元素看起来好像高度已经达到其最大值（如JQuery's progressive show），在它平滑地增长后垂直“推动”任何元素。带有高度的自由滑动CSS3动画：自动

这很容易固定height（请max-height从0到想要的大小），但不与height: auto，你不能让max-height从0到none去（元素将是0像素高一直然后突然出现在动画的100％）。

我试图测距transform从scaley(0)到scaley(1)但高度自动“保留”是从过渡的开始（使插入元件后的内容被粗暴地向下移动，而不是光滑，渐进推动）。

这里是一个测试用例：http://jsfiddle.net/duopixel/ZMc5B/，呃，它看起来不太好，它可能需要一些js来解决。 – Duopixel 2011-02-04 04:01:12

答

解决方案是单独转换应该移动的所有元素（即将另一个转换添加到元素之后的内容）。通常，您不能依靠自动回流进行转换。

我没有看到自动调高，请举个例子吗？ – 2011-02-04 10:03:20

答

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

如果要将高度设置为每个元素的完美程度，则必须对每个元素应用类并为每个元素指定高度。该链接设置最大元素的高度。

答

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

我开始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>

然后过渡推动者的边缘。

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

答

的另一种技术是使用Responsive Nav，它使用JavaScript来计算目标高度，然后创建的max-height从0到所得到的值的转变。代码here。

带有高度的自由滑动CSS3动画：自动

相关推荐