进入过渡 & 离开过渡
过渡 class
- v-enter-from：进入过渡的开始状态，在元素被插入前生效。
- v-enter-active：进入过渡生效时的状态
- v-enter-to：进入过渡结束状态
- v-leave-from：离开过渡开始状态
- v-leave-active：离开过渡生效状态
- v-leave-to：离开过渡结束状态
使用不带名称的 时，动画类名为上述6个默认 class，当 带有 name 属性时，则 v 替换为 name 属性的值，如 my-transition-enter-active。
自定义过渡 class 类名
我们可以通过以下类名重新定义过渡动画类名，这些类名优先级高于普通的过渡动画类名，这样可以非常方便使用第三方动画库：
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"
rel="stylesheet"
type="text/css"
/>
<div id="demo">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
显性设置过渡持续时间
通过 duration 属性设置
<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
钩子函数
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled">
</transition>
当只用 JavaScript 过渡的时候，在 enter 和 leave 钩子函数必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
初始渲染的过渡
可以通过 appear 属性设置初始渲染的过渡：
<transition appear></transition>
过渡模式
transition 在默认情况下，进入和离开是同时发生的。可以通过数值过渡模式修改默认行为。
- in-out：新元素先进行过渡，完成之后当前元素过渡离开；
- out-in：当前元素先进行过渡，完成之后新元素过渡进入。（常用模式）
列表过渡
列表的过渡可以使用 组件，该组件有以下特点：
- 默认情况下不会渲染为一个 DOM 元素，但是可以通过 tag 属性指定渲染的目标 DOM 元素
- 过渡模式不可用，因为不再相互切换特有的元素
- 内部元素必须提供唯一识别的 key 属性值
- css 过渡类名将会应用到内部元素中，而不是 本身
- 与 transition 一样，拥有6个动画类名，并且可以通过 name 属性自定义过渡的类名
- 与 transition 一样，拥有8个动画钩子函数
- v-move 类名：可以通过 v-move 类名为定位的改变添加动画。跟其他动画类名一样，它的前缀可以通过
name属性来自定义，也可以通过move-class属性直接设置
