問題描述

給一個(gè)元素設(shè)計(jì)過(guò)渡,理想效果是出現(xiàn)時(shí)高度遞增，消失是高度遞減。設(shè)計(jì)的代碼如下：

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

結(jié)果元素出現(xiàn)時(shí)，高度直接到達(dá)100px，消失時(shí)正常，修改代碼的順序如下：

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

問題解決了，不明白順序?yàn)槭裁磿?huì)造成影響，過(guò)渡效果不是在通過(guò)切換css來(lái)實(shí)現(xiàn)的么，應(yīng)該不是覆蓋的問題吧？具體效果可以點(diǎn)擊查看 jsbin

問題解答

@CRIMX 的答案已經(jīng)講清楚了，本質(zhì)上就是 enter 和 enter active 兩個(gè)類會(huì)在第一幀同時(shí)存在于動(dòng)畫元素上，而后通過(guò)移除 enter 類執(zhí)行動(dòng)畫，因此不能讓 active 類的樣式提前生效。

兩個(gè)類的方式雖然足以完成動(dòng)畫，但確實(shí)不太容易理解，所以 vue 2.1.8 開始增加了 to 的類名，可以將動(dòng)畫的結(jié)束態(tài)從 active 類中剝離出來(lái)，更方便理解，避免產(chǎn)生順序覆蓋問題。

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

這個(gè)真是挺奇怪的, 下次寫把a(bǔ)ctive寫前面, 坐等高人來(lái)解惑

你可以看一下官網(wǎng)給的解釋，說(shuō)的很詳細(xì)：https://cn.vuejs.org/v2/guide/transitions.html#過(guò)渡的-CSS-類名