Vue单组动画

本节讲解 Vue 单组动画，Vue 中的动画和 CSS3 中的动画有所不同，Vue 中的动画主要用来增加页面交互性，提升用户体验。例如淡入、淡出等一些简单的动画效果，并不适合做复杂的动画特效。

图4-1是 Vue 官网提供的动画流程图，只要深入理解了图4-1的内容，就可以掌握 Vue 动画。

Figure 1. 图4-1　Vue动画流程图

这是一个完整的动画执行过程，Enter 是入场动画，Leave 是离场动画。

Enter入场动画

入场动画有两个时间点，即 v-enter 和 v-enter-to，表示透明度从 0 到 1 的转换，v-enter 时间点表示动画进入之前的起始状态，v-enter-to 时间点表示动画进入之后的状态。

从起始状态到结束状态需要一定的时间，而这个时间段就是 v-enter-active。

Leave离场动画

离场动画同样有两个时间点和一个时间段，表示透明度从 1 到 0 的转换，v-leave 表示离开之前的状态，v-leave-to 表示离开之后的状态，v-leave-active 表示时间段。

从图 4-1 可以看出，动画进入之前和离开之后的状态是一样的，动画进入之后和离开之前的状态也是一样的，下面根据上述分析做一个 Vue 动画案例。

案例：单击按钮，控制元素的显示和隐藏。

（1）无动画版本，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <input type="button" value="toggle" @click="toggleFn">
    <div v-if="flag">
        <h1>Hello</h1>
    </div>
</div>

逻辑代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World',
            flag: true
        },
        methods: {
            toggleFn() {
                this.flag = !this.flag;
            }
        }
    });
</script>

代码解析如下。

使用 v-if 控制 div 的显示和隐藏，当单击按钮时，使 flag 的值取反。

缺点：没有动画效果，div 的显示和隐藏比较突兀。

（2）Vue动画版本。

使用 Vue 动画需要做两步。

用 transition 标签包裹，需要添加动画的元素。
添加两组 CSS 样式，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <input type="button" value="toggle" @click="toggleFn">
    <transition>
        <div v-if="flag">
            <h1>Hello</h1>
        </div>
    </transition>
</div>

CSS 样式代码如下。

<style>
    /* 两个时间点 */
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s ease;
    }
</style>

代码解析如下。

由于要给 div 元素添加动画效果，首先使用 transition 标签把 div 元素包裹起来，重点是 CSS 样式的添加，进入之后的样式不需要考虑，进入之前和离开之后的状态是一样的，透明度都为 0，所以使用 “opacity:0”。

transform 属性只是为了让动画看起来更加明显，也可以不加，如果不加则只是淡入、淡出的效果。

两个时间段用于设置动画的执行时间、执行速度等，这就是一个完整的 Vue 动画实例，运行一下代码则会更加容易理解 Vue 动画。