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