Vue过渡效果：CSS类名顺序对高度过渡的影响

在 Vue 中设计元素的高度过渡效果时，我们希望元素出现时高度逐渐增加，消失时高度逐渐减少。下面是一个初始代码示例：

然而，运行该代码后发现，元素在出现时高度直接跳到100px，而消失时则正常过渡。

为了解决这个问题，我们调整了类名的顺序：

通过调整类名顺序，问题得到了解决。那么，为什么类名顺序会影响过渡效果呢？

实际上，Vue 的过渡机制是基于 CSS 类名的添加和移除来实现的。当一个元素进入或离开时，Vue 会自动添加和移除相应的类名。在这个过程中，CSS 类的选择器优先级和定义顺序决定了样式应用的最终结果。

具体来说，Vue 在元素进入时会先添加 .collapse-enter 类，然后在下一帧添加 .collapse-enter-active 类并触发过渡效果。如果 .collapse-enter-active 类中定义的高度覆盖了 .collapse-enter 类中的高度设置，那么过渡效果就会失效。

因此，正确地排列类名顺序可以确保过渡效果按预期工作。您可以点击这里查看具体效果。