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概念不同)