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 的動態組件

列表過渡

這裏須要使用一個新標籤transition-group來是實現

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

<div id="root">
    <transition-group name="fade">
        <div v-for="item of list" :key="item.id">{{item.title}}-----{{item.id}}</div>
    </transition-group>
    <button @click="handleClick">添加</button>
</div>

let vm = new Vue({
    el: '#root',
    data: {
        count:0,
        list:[]
    },
    methods: {
        handleClick() {
            this.list.push({
                id:this.count ++,
                title:'hello world'
            })
        }
    }
})

爲何使用了transition-group標籤後，就能夠出現過渡動畫效果了呢？看下面代碼：

<transition-group name="fade">
    <div>hello world</div>
    <div>hello world</div>
    <div>hello world</div>
</transition-group>

在循環事後，頁面中會出現一個個div元素，若是你在外面添加一個transition-group的標籤，至關於你在每個div外層都加了一個transition標籤，看下面代碼

<transition>
    <div>hello world</div>
</transition>
<transition>
    <div>hello world</div>
</transition>
<transition>
    <div>hello world</div>
</transition>

這時候，Vue 把列表的過渡轉化爲單個的div元素的過渡了，Vue 會在這個元素隱藏或者顯示的時候動態的找到時間點，增長對應的class。