vue 过渡效果

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