Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
单元素/组件的过度
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
条件渲染 （使用 v-if）
条件展示 （使用 v-show）
动态组件
组件根节点
这里是一个典型的例子：
<div> <button @click="show = !show">toggle</button> <transition> <p v-if="show">hello</p> </transition> </div>
new Vue({ el:'#app1', data:{ show:true } })
.fade-enter-active, .fade-leave-active{ transition: opacity 2s; } .fade-enter, .fade-leave-to{ opacity: 0; }
运行结果如下：
点击toggle按钮会看见文字淡入淡出的效果。
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和Vue的 nextTick 概念不同)
过度的CSS类名
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
CSS过度
常用的过渡都是使用 CSS 过渡。以下为示例代码。
<div> <button @click="show = !show">toggle css</button> <transition> <p v-if="show">CSS 过渡</p> </transition> </div>
new Vue({ el:'#app2', data:{ show:true } })
.slide-fade-enter-active{ transition: all .3s ease; } .slide-fade-leave-active{ transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .slide-fade-enter, .slide-fade-leave-to{ transform: translateX(100px); opacity: 0; }
运行结果
点击按钮就会看到动画效果。
CSS动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
示例： (省略了兼容性前缀)
<div> <button @click="show = !show">toggle css</button> <transition> <p v-if="show">css 动画</p> </transition> </div>
new Vue({ el:'#app3', data:{ show:true } })
.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); } }
运行结果：
自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
enter-to-class (>= 2.1.8 only)
leave-class
leave-active-class
leave-to-class (>= 2.1.8 only)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
示例：