vue3过渡动画详解

一、vue中动画简单介绍
在vue中如果一些过程不存在动画效果，则表现出来的结果是比较生硬的。此时我们需要设置动画来使得页面更加灵活。

如上面代码所示，我们的h1只是在消失和显示来回切换，但是这样效果生硬。
此时我们使用transition组件来实现动画效果。
二、vue的transition动画
transition组件可以添加name属性,注意name属性值可以为class样式的第一个字符串。上面例子会在出现和消失会展示出来opacity渐变的情况。
三、transition组件的实现原理

上面的图为在来回切换过程中，h1标签中的class的变化，我们可以看到在进行渐变过程中，vue通过控制标签中的class的改变来实现动画效果。
具体流程如下所示

1、当在transition全局组件中进行dom插入或者删除时，此时vue会自动检测是否存在相关的css样式，如果存在，则在适当
的时机将class样式添加或者删除。
2、如果transition提供生命周期钩子，那么该钩子会在适当的时候进行回调。
3、如果不存在css样式也不存在生命周期钩子，那么dom插入和删除都会立即执行。

四、transition过渡动画的class属性

v-enter-from:定义进入过渡的开始状态。在元素被插入之前