javascript - vue過渡效果 css過渡 類別名稱的先後順序

Question

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

.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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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