简介

通过 Vue.js 的过渡系统，你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。

以 v-transition="my-transition 这个指令为例，当带有这个指令的 DOM 节点被插入或移除时，Vue 将会：

1.用 my-transition这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册，或是通过 transitions 选项定义在当前的组件内部。如果找到此对象，则会在过渡动画不同的阶段调用相应的钩子。

2.自动探测目标元素是否应用了 CSS 过渡效果或者动画效果，并在适当的时机添加/移除 CSS 类名。

3.如果没有提供 JavaScript 钩子函数，也没有检测到相应的 CSS 过渡/动画效果，DOM 的插入/移除会在下一帧立即执行。

<div v-if="show" transition="my-transition"></div>

所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令，比如 v-if，或是通过 Vue 实例的方法，比如 vm.$appendTo()。