Vue入門指南-06 Vue中的動畫(快速上手vue)

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。 包括如下工具：

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

Vue中的全程動畫

第一步： 須要把動畫控制的元素用一個transition元素包裹起來，這個元素是Vue官方提供的。

例如：
// <transition> <h3>我被transition元素包裹有了動畫效果</h3> </transition>
複製代碼

第二步： 須要在style中定義你要控制元素的動畫效果, Vue官方提供了6個class切換。

<style>
    // 通常狀況下， 元素的其實狀態和終止狀態的動畫是同樣的。
    // v-enter（這是一個時間點）是元素進入以前的其實狀態，此時尚未開始進入。
    // v-lealve-to（這是一個時間點）是動畫離開以後的終止狀態，此時動畫已經結束。
    v-enter, v-leave-to{
        opctity: 0 translateX(150px)
    }
    // v-enter-active是入場動畫的時間段
    // v-leave-active是離場動畫的時間段
    v-enter-active，v-leave-active{
        transition： all 0.4s ease
    }
</style>
複製代碼

第三步： 能夠給動畫添加時間屬性 :duration

// 設置 :duration="毫秒值" 屬性來統一設置入場和離場動畫的時長
例如：設置入場和離場的動畫時長爲200毫秒
<transition :duration="200"> <h3>我被transition元素包裹有了動畫效果</h3> </transition>
// 能夠給:duration的值爲一個對象，分別設置入場和離場的動畫時長
例如：
<transition :duration="{enter:200, leave:400}"> <h3>我設置了入場和離場的動畫時長</h3> </transition>
複製代碼

第四步： 咱們能夠自定義動畫的前綴 v- 將其替換爲自定義的

例如：
<style>
    my-enter, my-leave-to{
        opctity: 0 translateX(150px)
    }
    my-enter-active，my-leave-active{
        transition： all 0.4s ease
    }
</style>
<transition name="my"> <h3>自定義動畫的v-前綴</h3> </transition>
複製代碼

• 注意：在實現列表過濾的時候，若是須要過分的元素是經過v-for循環出來的，不能使用 transition 元素包裹，須要使用 transition-group 元素包裹。
• 注意：再給 transition 和 transition-group 元素添加 appear 屬性，能夠實現頁面建立出來的入場時候的動畫。
• 注意：經過爲 transition 和 transition-group 元素設置 tag 屬性來指定渲染的標籤元素，若是不指定默認渲染爲 span 標籤元素。
• 注意：經過爲 transition 和 transition-group 元素設置 mode 屬性來提供過分模式

// 當前元素先進行過分，完成以後新元素過分進入
<transition mode="out-in"> <h3>設置動畫過分模式</h3> </transition>
// 新元素先進行過分，完成以後當前元素過分離開
<transition mode="in-out"> <h3>設置動畫過分模式</h3> </transition>
複製代碼

Vue中的半程動畫

// 第一步一樣將被動畫控制的元素用transition元素包裹起來
// 第二步調用鉤子函數， 這裏只介紹部分鉤子，其他的動畫鉤子請移步到官網查看
<transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
>
<h1>半程動畫</h1></transition>
// 第三步在配置對象中的methods屬性中定義方法
new Vue({
    el: "#app",
    methods: {
        // 注意：動畫鉤子函數的第一個參數 el 表示要執行動畫的那個DOM元素，是個原生的js DOM元素
        // beforeEnter函數表示動畫入場以前，此時動畫還未開始，此時編輯動畫以前的樣式
        beforeEnter (el) {
            el.style.transform = "translate(0,0)"
        },
        // enter函數表示動畫開始以後，這裏能夠設置完成動畫以後的結束狀態
        enter (el) {
            // 注意：這裏要加一句el.offsetWidth/Height/Left/Right,這句話沒有實際的做用。
            // 可是若是不寫，不會出來動畫效果，這裏能夠認爲它會強制動畫刷新。
            el.offsetWidth
            el.style.transform = "translate(150px, 450px)"
            el.style.transiton = all 1s ease
            done()
        },
        // 動畫完成以後會調用這個函數
        afterEnter (el) {
            // 這裏寫動畫完成之後的樣式
        }
    }
})
複製代碼

• 注意：在只用JavaScript過分的時候，在enter和leave中必須使用done進行回調，不然他們將被同步調用，過分會當即完成，看不到動畫效果。

Vue中使用第三方類實現動畫（全程）

咱們能夠經過如下特性來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其餘第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

例如： 引入第三方 Animate.css 動畫庫

// 在動畫庫中選取咱們想要的動畫效果名稱，例如入場選 bounceln, 離場 bounceOut
<transition 
    enter-active-class="animated bounceln"
    leave-active-class="animated bounceOut"
> <h3>引用第三方動畫庫</h3> </transition>
複製代碼

• 注意：在引用第三方動畫庫選定動畫類的的時候還要在其前面加上一個基本的類animated

我的推薦在使用Vue的時候若是動畫效果簡單本身寫就行，複雜的話在引用第三方動畫庫。並且在給元素添加動畫的時候，要考慮清楚是加全程動畫仍是半程動畫就夠類。

Vue入門指南(快速上手vue)