AngularJS - CSS3動畫的高度（自動） - 有時可以工作

Question

我想動畫元素，我不知道實際高度，這就是爲什麼我使用trick和max-height。

的CSS是非常簡單的：

.animate-enter-setup, .animate-leave-setup { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    overflow: hidden; 
} 

.animate-enter-setup { 
    opacity:0; 
    max-height: 0; 
} 
.animate-enter-setup.animate-enter-start { 
    max-height: 200px; 
    opacity:1; 
} 

.animate-leave-setup{ 
    opacity:1; 
    max-height: 200px; 
} 
.animate-leave-setup.animate-leave-start { 
    opacity:0; 
    max-height: 0; 
} 

在這裏的例子： ​​的leave動畫時，該項目沒有完成以前enter動畫獲得的唯一的應用。 當該項目完成enter動畫時，leave動畫未得到應用（它作爲一個班級，但沒有視覺效果）。

我懷疑CSS有問題，而不是角度。但我不知道那會是什麼。

Answer 1

事實證明，如果你想使用max-height伎倆，那麼你要動畫元素必須（不僅在動畫類）

這裏奇怪的是，定義max-height和overflow:hidden的setup動畫類即使在元素上也不會被瀏覽器應用。

更新例如：http://plunker.co/edit/qnEFDhAyGqhsJdCGrF71?p=preview

我認爲這可能是一個錯誤或者在角或鉻。