css - 具有基于内容的动态变化高度的 div 的 webkit-transition 高度？

Question

请看下面的jsFiddle

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

您可以单击显示不同长度内容的各种按钮，从而导致框变大/变小。

我希望高度变化是动画的，所以它不是那么跳跃，我通过添加来尝试这个:

-webkit-transition: all 1s linear;

但这在这个用例中没有影响。关于不需要 JavaScript 的解决方案有什么想法吗？

谢谢

Answer 1

如果没有一些 Javascript 的帮助，我恐怕无法使用 CSS3 转换动画高度，查看:

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

此外，您的代码从 display: none 变为 display: block，这在任何情况下都不会影响高度。使用 height: 0 和 overflow: hidden;

代替 display none