Javascript 为什么CSS3转换没有被触发？

我有一个

类的

扰流板

，另外一个类

折叠了

，限制了它的高度。
但是，当我添加和删除已折叠的类时，

高度

的CSS3转换不会触发

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

我发现这个在线资源使用jQuery（我使用的是Dojo）做同样的事情，它可以工作：

小提琴：

---

我怎样才能过渡到工作岗位呢？

其他地方已经回答了这个问题

不能将高度从数值转换为自动（或反过来）

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

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