javascript - 为什么这个 CSS3 过渡没有被触发？

Question

我有一个<div>班级，还有一个限制其高度spoiler的附加班级。 但是，当我添加和删除类时，不会触发 CSS3 转换。collapsed
collapsedheight

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; }