vue在插入，更新，或者移除DOM时，提供多种不同方式的应用过渡效果，包括以下工具：
- 在css过渡和动画中自动应用class
- 可以配合使用第三方的插件库，例animate.css
- 在过渡钩子函数中使用javascript直接操作DOM
- 可以配合使用第三方javascript动画库，如 Velocity.js
单元素/组件的过渡
vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加entering/leaving过渡。
- 条件渲染（使用v-if）
- 条件展示(使用v-show)
- 动态组件
- 组件根节点
这里是一个典型的例子：
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
当插入或删除包含在transition组件中的元素时，vue将做以下处理：
1，自动嗅探目标元素目标元素是否应用了css过渡或动画，如果是，在恰当的时机添加/删除css类名。
2，如果过渡组件提供了javascript钩子函数,这些钩子函数将在恰当的时机被调用，
3，如果没有找到javascript钩子并且也没有检测到css过渡/动画，DOM操作(插入/删除)在下一帧中立即执行，(注意：此指浏览器逐帧动画机制，和vue的nextTick概念不同)