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

Question

请看下面的jsFiddle

您可以单击各种按钮,这些按钮显示不同长度的内容,这会导致框增长/缩小.

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

-webkit-transition: all 1s linear;

但这在这个用例中没有任何影响.对于不需要JavaScript的解决方案的任何想法？

谢谢

Answer 1

我担心在没有一些Javascript帮助的情况下无法使用CSS3过渡动画高度,请查看:

此外,您的代码从display:none到display:block,在任何情况下都不会对高度产生影响.而不是显示没有使用高度:0溢出:隐藏;