## 一、使用animate.css庫 ##

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

• 在 CSS 過渡和動畫中自動應用 class
• 可以配合使用第三方 CSS 動畫庫，如 Animate.css
• 在過渡鉤子函式中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

引用animate.css

<link rel="stylesheet" type="text/css" href="../animate.css">

可自定義enter-active的名字

<div
 
 id="root">
    <transition name="fade" appear enter-active-class="animated swing" appear-active-class="animated swing" leave-active-class="animated shake">
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handleClick">toggle</button>
</div
 
>

var vm = new Vue({
    el:"#root",
    data:{
        show:true
    },
    methods:{
        handleClick:function(){
            this.show=!this.show
        }
    }
})

二、vue動畫效果

在進入/離開的過渡中，會有 6 個 class 切換。

• v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。

• v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之後移除。

• v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。

• v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。

• v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之後移除。

vue過渡效果

<style>
    /* 如果transition沒有name 則為v-enter*/
    .fade-enter,.fade-leave-to{
        opacity: 0;
    }
    .fade-enter-active,.fade-leave-active{
        transition: opacity 3s;
    }
</style>