过渡

关于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-enter和v-enter-to是进入过渡的始末状态，v-leave和v-leave-to是离开过渡的始末状态，而v-enter-active 和 v-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>

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