vue在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括：
1. 在 CSS 过渡和动画中自动应用 class
2. 可以配合使用第三方 CSS 动画库，如 Animate.css
3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
当以下情形下会触发过度效果：
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，
DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
CSS过渡实例：
<template>
<div>
<button @click="show = !show">click</button><br/>
<!--注意此处的属性名为name-->
<transition name="fade">
<p v-if="show">hello world</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
1. v-enter：
定义进入过渡的开始状态。
在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：
定义进入过渡生效时的状态。
在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to:
2.1.8版及以上 定义进入过渡的结束状态。
在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave:
定义离开过渡的开始状态。
在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：
定义离开过渡生效时的状态。
在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to:
2.1.8版及以上 定义离开过渡的结束状态。
在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
说明：
opacity 0 => 1
v-enter => v-enter-active => v-enter-to
opacity 1 => 0
v-leave => v-leave-active => v-leave-to
使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。
如果使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线
CSS 动画实例：
<template>
<div>
<button @click="show = !show">click</button><br/>
<transition name="bounce">
<p v-if="show">hello world</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style lang="less" scoped>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
自定义过渡的类名
可以配合第三方库进行使用
可以通过以下特性来自定义过渡类名：
1. enter-class
2. enter-active-class
3. enter-to-class (2.1.8+)
4. leave-class
5. leave-active-class
6. leave-to-class (2.1.8+)
自定义过度类名优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
第三方CSS动画库实例：
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<template>
<div>
<button @click="show = !show">click</button><br/>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">hello world</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style lang="less" scoped>
</style>可以使用<transition>的 type 特性并设置 animation 或 transition 来明确声明需要 Vue 监听的类型。
可以用<transition>组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
1. <transition :duration="1000">...</transition>
2. <transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript 钩子
可以在属性中声明 JavaScript 钩子
可监听的几个状态：
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"