Javascript – Vue-Übergangseffekt, CSS-Übergangsreihenfolge von Klassennamen

Question

Entwerfen Sie einen Übergang für ein Element. Der ideale Effekt besteht darin, dass die Höhe zunimmt, wenn es erscheint, und abnimmt, wenn es verschwindet.
Der entworfene Code lautet wie folgt:

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

Wenn das Ergebniselement angezeigt wird, erreicht die Höhe direkt 100 Pixel, und wenn es verschwindet, ist es normal. Die Reihenfolge zum Ändern des Codes ist wie folgt:

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

Das Problem ist gelöst. Warum die Reihenfolge keinen Einfluss hat, sollte es doch kein Overlay-Problem sein?
Sie können klicken, um jsbin für bestimmte Effekte anzuzeigen

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-类名