爲什麼這個CSS3轉換沒有被觸發？

Question

我有一個<div>類spoiler與其他類collapsed限制其高度。
但是，當我添加並刪除collapsed類時，不會觸發height的CSS3轉換。

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

我發現這個在線資源，這確實使用jQuery（我使用道場）同樣的事情，它的工作原理：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; }