过渡

关于vue的过渡使用,先从一个最简单的例子开始说起

1
2
3
4
<button v-on:click="show = !show">点击</button>
<transition name="fade">
<p v-if="show">{{msg}}</p>
</transition>
1
2
3
4
5
6
7
8
9
10
11
<script>
export default {
name: "About",
data: function () {
return {
msg: "helloworld",
show: true
}
},
};
</script>
1
2
3
4
5
6
7
8
9
10
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

在以上例子中实现了p标签的淡入和淡出

在VUE中,过渡的使用非常简单,首先用transition标签把需要添加过渡的元素框起来,在标签中用name属性来标识动画,然后在css中用v-xxxx格式来制定class切换,这里v指的是过渡的name,xxxx则是固定类名后缀

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter

vue的过渡有六种类名后缀,官方的图例很好地说明了这些后缀的含义

v-enterv-enter-to是进入过渡的始末状态,v-leavev-leave-to是离开过渡的始末状态,而v-enter-activev-leave-active 可以控制进入/离开过渡的不同的缓和曲线

过渡缓和曲线见如下代码

1
2
3
4
5
6
7
8
9
10
11
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to{
transform: translateX(10px);
opacity: 0;
}

动画

直接看例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

动画和过渡的使用方法非常相似,区别在于动画中v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除,而过渡中v-enter在元素被插入之后的下一帧移除

自定义过渡类名与animate.css库

我们可以在标签中使用如下六个属性来自定义过渡类名

1
2
3
4
5
6
1. enter-class
2. enter-active-class
3. enter-to-class
4. leave-class
5. leave-active-class
6. leave-to-class

结合animate.css库可以更方便地使用过渡动画,使用示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<html>
<link
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
rel="stylesheet"
type="text/css"
/>
<div class="about">
<button v-on:click="show = !show">Toggle</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">{{ msg }}</p>
</transition>
</div>
</html>
</template>

过渡生命周期

原理同vue实例生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"

v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>

过渡模式

vue的过渡默认进入和离开同时生效,有时候这并不能满足需求,因此,vue还提供了过渡模式

in-out:新元素先进行过渡,完成之后当前元素过渡离开

out-in:当前元素先进行过渡,完成之后新元素过渡进入

使用方法如下

1
2
3
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>

以上这些应该可以满足基本需求了,有更复杂的过渡动画需求(比如列表,网格之类的)可以参考官方文档