webkit-过渡高度为基于内容动态变化高度的div？ [英] webkit-transition height for a div with a dynamic changing height based on content?

问题描述

请参阅以下jsFiddle

please see the following jsFiddle

http://jsfiddle.net/ SgyEW / 10 /

您可以点击显示不同长度内容的各种按钮，这会导致框增长/缩小。

You can click the various buttons which shows different length content which causes the box to grow/shrink.

我希望高度变化是动画的，所以它不是那么跳跃，我尝试这样添加：

I want the height change to be animated so it is not so jumpy, I tried this by adding:

-webkit-transition: all 1s linear;

但这在此用例中没有效果。

But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?

感谢

推荐答案

我恐怕没有办法用CSS3转换动画高度没有Javascript帮助，检查：

I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:

css transition height：0;到height：auto;

你可以使用CSS3从height：0转换到内容的可变高度吗？

此外，您的代码从显示：none到display：block，在任何情况下都不会对height造成影响。而不是显示无使用height：0 with overflow：hidden;

Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;

这篇关于webkit-过渡高度为基于内容动态变化高度的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！