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

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

.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動畫效果是存在的，但是我們想要用動態組件來實現，該怎么弄呢？