javascript - vue過渡效果 css過渡 類名的先后順序

問題描述

給一個元素設計過渡,理想效果是出現時高度遞增，消失是高度遞減。設計的代碼如下：

.collapse-enter-active, .collapse-leave-active { transition: height .5s;}.collapse-enter, .collapse-leave-active { height: 0;}.collapse-leave { height: 100px;} .collapse-enter-active { height: 100px;}

結果元素出現時，高度直接到達100px，消失時正常，修改代碼的順序如下：

.collapse-enter-active, .collapse-leave-active { transition: height .5s;}.collapse-enter-active { height: 100px;}.collapse-enter, .collapse-leave-active { height: 0;}.collapse-leave { height: 100px;}

問題解決了，不明白順序為什么會造成影響，過渡效果不是在通過切換css來實現的么，應該不是覆蓋的問題吧？具體效果可以點擊查看 jsbin

問題解答

@CRIMX 的答案已經講清楚了，本質上就是 enter 和 enter active 兩個類會在第一幀同時存在于動畫元素上，而后通過移除 enter 類執行動畫，因此不能讓 active 類的樣式提前生效。

兩個類的方式雖然足以完成動畫，但確實不太容易理解，所以 vue 2.1.8 開始增加了 to 的類名，可以將動畫的結束態從 active 類中剝離出來，更方便理解，避免產生順序覆蓋問題。

在元素被插入時 v-enter 和 v-enter-active 同時生效的，前者在下一幀移除，后者在動畫完成后移除。所以 v-enter-active 要寫在前面。leave 也一樣。

這個真是挺奇怪的, 下次寫把active寫前面, 坐等高人來解惑

你可以看一下官網給的解釋，說的很詳細：https://cn.vuejs.org/v2/guide/transitions.html#過渡的-CSS-類名