Vue学习（9）过度&动画

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

DEMO:

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 3s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>
<div id="app">
    <button @click="isShow = !isShow">toggle</button>
    <transition name="fade">
        <p v-show="isShow">显示或隐藏</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        },
    })
</script>

动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
DEMO：

<style>
    .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);
        }
    }
</style>
<div id="app">
    <button @click="isShow = !isShow">Toggle show</button>
    <br>
    <transition name="bounce">
        <p v-if="isShow" style="display: inline-block">Hello,world</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        },
    })
</script>