Vue定义多组动画

在一个页面中，可以给多个元素添加动画效果，4.1 节中的案例是单击按钮让 div 元素从右往左过渡，本节新增元素，单击按钮让 div 元素从下往上过渡，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <input type="button" value="toggle" @click="toggleFn">
    <transition>
        <div v-if="flag">
            <h1>Hello</h1>
        </div>
    </transition>
    <hr>
    <input type="button" value="toggle" @click="toggleFn2">
    <transition name="myF">
        <div v-if="flag2">
            <h2>Hello</h2>
        </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;
    }

    /* 动画二 */
    .myF-enter,
    .myF-leave-to {
        opacity: 0;
        transform: translateY(100px);
    }

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

逻辑代码如下。

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

代码解析如下。

要做一个多次使用动画的动画，首先需要给 transition 添加 name 属性，代码为 “<transition name="myF">”。

然后使用 CSS 定义两组样式即可，同样是两个时间点和两个时间段的样式，只需要把之前的 “v-” 修改成 “myF-” 即可，myF 是自定义的属性名。

运行上述代码发现，单击不同的按钮会显示不同的动画效果。