Vue中的基本过渡动画及其实现原理分析

前言

动画是日常开发中不可或缺的一部分，它不仅可以让元素的直接切换更加自然，还可以大大提升用户体验。因此，Vue也为动画提供了非常强大的支持。Vue不仅支持用CSS写一些过渡效果，还支持JS。但是，本文介绍了如何使用CSS实现过渡动画、关键帧动画以及实现原理

过渡动画的原理

1.首先，最基本的一点是，如果想要在单个元素/组件中实现过渡动画，需要在元素/组件所在的HTML标签之外包裹一层过渡标签

2.元素/组件被过渡标签包装后，Vue会自动为我们构建一个动画流程。具体过程会在下面提到，所以先记住这句话就行了，也就是说，如果在样式标签中添加了一些样式，Vue会在某个时间节点自动对元素或组件添加和删除对应的样式。

3.如上所述，当一个元素/组件被一个转换标签包装时，Vue会自动构建一个动画流程，即在某个时间节点自动添加/删除对应的CSS类名。Vue实际上提供了六个对应的类名。这里用官网的一张图片列出来。

这样看官网人物的解读可能不够清晰，所以在这里我们用一个图片来帮助大家更好的理解这些CSS类名分别是什么时候添加和删除的

4添加和删除每个类名的时间

4.1

假设黑色横线是动画的整个过程，红点是动画开始的瞬间。所以当我们用过渡标签包装元素/组件时，Vue会在动画开始前添加两个CSS类名，即v-enter/。V-enter-to动画开始时，V-enter会自动移除，v-enter-active类将存在于整个动画过程中，直到动画结束，并将与v-enter/v-enter-to一起自动删除

4.2

我们还假设黑色的横线是动画的整个过程，所以这里我们可以看到，在动画开始之前会添加v-leave。动画开始时，将添加v-leave-TO，v-leave-active将始终存在于整个动画过程中，直到动画结束，并与V-LEAVE/v-leave-to一起删除

# # #编码

当你有了这些理论知识，你可以写一个非常简单的演示。假设有一个要求，页面上的一个元素被按钮隐藏和显示。同时，在隐藏和显示的过程中，有一个从0-1逐渐透明的过程

思路

透明度变化的转换过程是通过控制v-if元素的显示并用转换标签包装这些元素来实现的

1.首先设置基本页面，然后单击按钮控制元素的隐藏和显示

2.因为已知vue会在元素被转换包装后自动添加类名，所以在style标签中写入相应的style效果

风格。v-输入，v-leave-to { opa city 3360 0；} .v-回车-激活，v-离开-活动{ transition:不透明度3s；}/Style这里需要理解的一点是，上面已经提到过，触发进场动画时会立即移除v-enter，所以不透明度在样式中写为0，也就是说，当这个元素没有显示在原页面上时，不透明度会变为1，v-enter-active会一直监控transit :不透明度。如果改变了，让效果在3秒内结束。相反，退出动画是一样的。动画执行时将添加v-leave-to。此时，v-leave-active感应到transit :不透明度的变化，会在3秒内做出相应的改变。最终的代码运行结果如下

摘要

以上就是边肖介绍的基本过渡动画及其在Vue中的实现原理分析，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！