了解vue.js转换css类名(推荐)

首先，附上官方文件图。

一般来说是在解释v-enter，v-enter-active，v-leave，v-leave-active的意思，但是看了很久，就是看不懂。我总是把它和鼠标的鼠标悬停和鼠标退出事件联系起来。经过多方寻找，终于明白了。以下是我的理解。希望对路过的人有帮助，也希望路过的人能帮我查一下。

start:

首先通过一个例子，实践是检验真理的唯一标准。

结果：点击按钮，当show=false时，div消失；再次点击，show=true，div从蓝色变为橙色，过渡时间为3s。

将样式更改为：

结果：点击按钮，show=false时，div由橙色逐渐变为蓝色，过渡时间为3s。

通过以上两个例子，v-enter和v-leave的区别很明显。

V-enter:定义目标元素消失然后再次出现的状态。

V-leave:定义目标元素准备消失时的状态；

但以上两件事都是瞬间的，就像一帧flash动画。至于第二帧到结尾的内容，V-Enter-Active和v-leave-active是交接的。

V-enter-active:定义文档中出现的目标元素的最终状态(最后一帧)；

V-leave-active:定义目标元素离开文档时的最终状态(最后一帧)，显示后消失。

另外，过渡的效果在以上两种风格中都有定义，难怪官方文档中的v-enter-active和v-leave-active代表距离。

注意：这两种样式必须在对应的v-enter或v-leave之前定义，否则显示无效。

以上是对边肖介绍的vue.js的transition css类名的理解。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！