vue3.0 ＜transition＞ 过渡动画组件的使用详解 使用＜transition＞切换标签时没有效果？如何解决？

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点
  

过渡的类名

进入enter

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
   在vue3.0中的语法 v-enter-from

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

离开leave

1. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

2. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

3. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave 被删除)，在过渡/动画完成之后移除。

大家是不是都很好奇v-里的v是什么呢？

v-相当于name属性里的参数fade，如果没有name属性的话，就需要使用v-是他默认的机制。

<transition  name="fade"></transition>

如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为my-transition-enter。

基本实例

<div id