Vue 中多個元素或組件的過渡

多個元素之間過渡動畫效果

多元素之間如何實現過渡動畫效果呢？看下面代碼

.fade-enter,
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: opacity 3s;
}

<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
        <div v-else>bye world</div>
    </transition>
    <button @click="handleClick">切換</button>
</div>

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

這麼寫行不行呢？肯定是不行的，因爲 Vue 在兩個元素進行切換的時候，會盡量複用dom，就是因爲這個原因，導致現在動畫效果不會出現。

如果不讓 Vue 複用dom的話，應該怎麼做呢？只需要給這兩個div不同的key值就行了

<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">bye world</div>

這個時候當div元素進行切換的時候，就不會複用了。

mode

Vue 提供了一mode屬性，來實現多個元素切換時的效果

mode取值in-out，動畫效果是先出現在隱藏

<div id="root">
    <transition name="fade" mode="in-out">   //第一次點擊時，執行順序爲：①②
        <div v-if="show">hello world</div>  //再消失  ②
        <div v-else>bye world</div>        //先顯示 ①
    </transition>
    <button @click="handleClick">切換</button>    
</div>

mode取值爲out-in，動畫效果爲先隱藏在出現

<div id="root">
    <transition name="fade" mode="out-in">   //第一次點擊時，執行順序爲：①②
        <div v-if="show">hello world</div>  //先消失  ①
        <div v-else>bye world</div>        //再顯示  ②
    </transition>
    <button @click="handleClick">切換</button>    
</div>

多個組件之間過渡動畫效果

這裏需要藉助動態組件來實現多組件之間過渡動畫效果

先用普通的方式來實現切換：

.fade-enter,
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: opacity 1s;
}

<div id="root">
    <transition name="fade" mode="in-out">
        <child-one v-if="show"></child-one>
        <child-two v-else></child-two>
    </transition>
    <button @click="handleClick">切換</button>
</div>

Vue.component('child-one',{
    template:'<div>child-one</div>'
})
Vue.component('child-two',{
    template:'<div>child-two</div>'
})
let vm = new Vue({
    el: '#root',
    data: {
        show: true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})

你會發現，這樣子實現組件切換，transition動畫效果是存在的，但是我們想要用動態組件來實現，該怎麼弄呢？

可查看之前的文章：Vue 動態組件與 v-once 指令，這篇文章中詳細的介紹了 Vue 的動態組件