为什么这个CSS3过渡没有被解雇？

Question

我有<div>个班级spoiler，另外一个班级collapsed限制了它的高度。
但是，当我添加和删除collapsed类时，height的CSS3转换不会被触发。

div.spoiler { height: auto; transition: height 2s ease; }
div.spoiler.collapsed { height: 4px; overflow: hidden; }

我发现这个在线资源使用jQuery（我正在使用Dojo）做同样的事情，它起作用：http://www.impressivewebs.com/css3-transitions-javascript/

小提琴：http://jsfiddle.net/2Cnxv/

如何让我的过渡工作？

Answer 1

这已经在其他地方得到了解答。

您无法将高度从数值转换为自动（或反过来）。

一种解决方法是转换最大高度，将其设置得足够高（问题是您必须猜测该数字）

div.foo { height: auto; 
    max-height: 30px;
    border: 1px solid red; 
    transition: max-height 2s ease; }
div.foo.bar { 
    max-height: 4px; 
    overflow: hidden; }