当从 DOM 中插入、更新或移除项目时,Vue 提供多种应用过渡效果的方式。包括以下工具:
- 在 CSS 过渡和动画中自动处理 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
vue提供了一个transition外层包裹容器组件,可以给条件渲染(v-for)、条件展示(v-show)、动态组件和组件根节点添加进入(enter)和离开(leave)过渡。
单元素/组件过渡
1.通过css样式实现过渡动画,在css样式中可以通过transform和animation属性来定义动画效果。
<template>
<div>
<button @click="show=!show">点击</button>
<transition name="fade">
<p v-if="show">Hello</p>
</transition>
</div>
</template>
在css样式中通过class类名与transition的name值关联,设置过渡效果
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
注:有6种class名来处理过渡的过程
1、v-enter:进入式过渡的开始状态,作用于开始的一帧
2、v-enter-active:进入式过渡的激活状态,作用于整个过程
3、v-enter-to:进入式过渡的结束状态,作用于结束的一帧(仅适应于2.1.8+)
4、v-leave:离开式过渡的开始状态,作用于开始的一帧
5、v-leave-active:离开式过渡的激活状态,作用于整个过程
6、v-leave-to:离开式过渡的结束状态,作用于结束的一帧(仅适应于2.1.8+)
2、自定义过渡的class类名:使用第三方css动画库
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"//tada和boundceOutRight是css动画库里的类名
>
<p v-if="show">hello</p>
</transition>
</div>
3、显示过渡的持续时间
<transition :duration="1000">...</transition>
//还可以为进入式和离开式持续时间指定不同的值
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
4、javaScript钩子函数:使用第三方javaScript动画库:Velocity.js
在仅使用javaScript的过渡显式添加v-bind:css="false",以便Vue可以跳过css侦测。
<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Demo
</p>
</transition>
</div>
在使用enter和leave钩子函数中,必须有done回调函数,否则,这两个钩子函数会被同步调用,过渡会立即完成;
new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
状态间过渡具体使用场景
1、在初始渲染时过渡:在transition标签内添加appear属性
默认情况下会使用特定过渡,如果想要添加自定义的样式可以通过appear-class来绑定类名初始渲染进入时刻效果,appear-active-class绑定整个过程的效果,appear-to-class绑定结束状态效果。也可以自定义指定javaScript钩子事件,v-on:before-appear,v-on:appear、v-on:after-apprar和v-on:appear-cancelled。
2、多元素之间的切换效果
通过v-if和v-else来对初始状态进行切换,当在具有相同标签名之间切换时,需要给标签添加一个唯一的key属性,便于区分。
不同元素间的切换:
<transition>
<table v-if="items.length > 0">
<!-- ... -->
</table>
<p v-else>Sorry, no items found.</p>
</transition>
相同标签名之间的切换需要添加key属性:
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
注:两个按钮会同步渲染 - 当一个过渡进入时,另一个过渡离开。这是 <transition>
的默认行为 - 进入和离开同时发生。不过如果是绝对定位或者将元素位移时就像是滑动效果。若同时生效不能满足需求,transition还提供了过渡模式mode属性,属性值为out-in或者in-out。
3、多组件之间的过渡
不需要使用key属性,使用动态组件component,通过v-show绑定值,控制显示内容。
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
opacity: 0;
}