transition 组件实现动画效果

在 CSS 3 动画中，transition 是一个方案，animation 是另一个方案。在前面的演示代码中讲解了如何将 transition 组件与 CSS 3 的 transition 结合来实现过渡效果。下面来讲解如何将 transition 组件与 CSS 3 的 animation 结合来实现动画。

animation 实现动画效果在于使用 @keyframes 来定义不同阶段的 CSS 样式。将前面的代码进行改造，如示例代码 5-3-1 所示。

示例代码5-3-1　将 transition 组件与 CSS 3 的 animation 结合实现动画1

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}

在上面的代码中定义了一个 bounce-in 的动画，效果就是元素在显示和隐藏时有一个 “变大缩小” 的效果。reverse 表示动画反向播放。同时，定义了 .bounce-enter-active 和 .bounce-leave-active 来使用这个动画。下面修改一下组件的相关代码，如示例代码 5-3-2 所示。

示例代码5-3-2　将 transition 组件与 CSS 3 的 animation 结合实现动画2

<div id="app">
    <button @click="clickCallback">切换</button>
    <transition name="bounce">
        <div v-if="show">Hello!</div>
    </transition>
</div>
Vue.createApp({
    data(){
        return {show: false}
    },
    methods:{
        clickCallback(){
            this.show = !this.show
        }
    }
}).mount("#app")

在这个例子中，使用 v-show 指令来实现元素的显示和隐藏，当我们单击按钮时，会看到 Hello！ 的动画效果，具体在什么时机应用哪些动画 class 类，可以参考之前讲解的 6 个 class 类及含义。使用 transition 组件实现 CSS 的动画原理和 CSS 的过渡效果类似，都需要在动画的关键时机制定对应的 CSS 样式，区别是：在动画中，v-enter 类名在节点插入 DOM 后不会立即被删除，而是在 animationend 事件触发时（动画结束时）被删除。在这个代码段中定义了一个 name 是 bounce 的 transition 组件，在显示动画生效时会套用 .bounce-enter-active 的样式，在隐藏动画生效时会套用 .bounce-leave-active 的样式。而隐藏时，动画效果就会反着播放。