过渡 & 动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
过渡类
如果你使用一个没有名字的 <transition>，则 'v-' 是这些类名的默认前缀。
- v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- v-enter-active：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
- v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
- v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
- v-leave-active：定义离开过渡生效时的状态。在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
- v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
自定义过渡类名
便于引入第三方动画库，自定义类名优先级高于普通的类名
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<div id="demo">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-if="show">hello</p>
</transition>
</div>
JS钩子函数
- before-enter：function(el){ ... }，
- enter：function(el , done){ ... }，
- after-enter：function(el){ ... }，
- enter-cancelled：function(el){ ... }，
- before-leave：function(el){ ... }，
- leave：function(el , done){ ... }，
- after-leave：function(el){ ... }，
- leave-cancelled：function(el){ ... }
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。
<transition>
- name : 过渡名
- enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-active-class ：指定过渡阶段类名
- duration ：[ms | {enter: ms, leave: ms}]
- mode: 过渡模式
- in-out：新元素先进行过渡，完成之后当前元素过渡离开。
- out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<transition-group>
- 不同于
<transition>，它会以一个真实元素呈现：默认为一个<span>。可以借助tag改成其他标签。 - 过渡模式不可用，因为我们不再相互切换特有的元素。即mode不适用。
- 内部元素总是需要提供唯一的 key attribute 值。
- CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
- 不仅可以进入和离开动画，还可以改变定位。
- 属性
- name：过渡名
- tag：设置标签
- enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-active-class ：指定过渡阶段类名
- move-class：在元素的改变定位中应用