Vue 中 CSS 動畫原理

下面這段代碼，是點擊按鈕實現hello world顯示與隱藏

<div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

此時有一個需求，希望是在顯示與隱藏時，能實現漸隱漸現的動畫效果。

<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

如果希望hello world有一個動畫效果的話，需要在外面套一層transition標籤，意思它包裹的內容，有一個動畫效果，可以給它一個名字name="fade"。

enter

當一個元素被transition標籤包裹之後，Vue 會自動的分析元素的css樣式，然後構建動畫流程

在動畫還沒有執行的一瞬間，Vue 會幫我們在dom標籤上添加兩個class，分別是fade-enter、fade-enter-active。

當動畫第一幀執行結束之後，transition這個標籤分析過，裏面有一個動畫效果，Vue 會在動畫運行到第二幀的時候，會將dom標籤上v-enter的class刪除，再添加一個v-enter-to的class。

接着動畫會繼續執行，執行到結束的一瞬間，Vue 會幹一件事，它會把之前添加的v-enter-to和v-enter-active都刪除，

.fade-enter{
    opacity: 0;
}
.fade-enter-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

我們只需要在css中給fade-enter和fade-enter-active分別寫上樣式就行了。這裏要注意的是 Vue 中默認以v開頭，如：v-enter，transition加個name屬性，就可以用name屬性值做開頭，如：fade-enter。

現在這裏兩個class的意思是：
動畫還沒執行時，就已經有fade-enter，fade-enter-active，動畫第一幀運行時fade-enter就會被移除，css效果opacity: 0就會變成opacity: 1，直到動畫執行完fade-enter-active纔會被移除，這期間它用transition對opacity進行監控，需要3s才能完成。

leave

隱藏的動畫流程：
隱藏的第一個瞬間時，Vue 會在dom上添加兩個class，分別是v-leave和v-leave-active

運行到第二幀時，Vue 會將v-leave移除，再添加一個v-leave-to

接着動畫會繼續執行，執行到結束的一瞬間，Vue 會把之前添加的v-leave-to和v-leave-active都刪除。

.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">按鈕</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

爲什麼加了這兩個css動畫效果就出來了呢？

從動畫執行的第一個瞬間，到動畫執行完畢，fade-leave-active這個class都存在。也就是在動畫運行過程中，我要時刻監聽div的opacity，一旦opacity發生變化，我要讓讓他在3s內執行完畢。

在第一個瞬間fade-leave的opacity爲1，就是顯示狀態；第二個瞬間opacity爲0了，此時要給它添加一個fade-leave-to的class，而fade-leave-active一直在監聽opacity的變化，一旦opacity發生變化，會讓它在3s內完成

總結

在transition標籤中中不光v-if能控制顯示隱藏，v-show也能控制顯示隱藏，甚至動態組件也行。只要在transition中標籤中動畫發生變化，都會有一個過渡效果