三、多个元素、组件的过渡

1，多个元素的过渡

（1）对于原生标签咱们能够应用 v-if/v-else 实现多元素过渡。上面是一个列表显示、数据空提醒之间的过渡：

<transition>  <table v-if="items.length > 0">    <!-- ... -->  </table>  <p v-else>Sorry, no items found.</p></transition>

（2）如果有两个以上的元素过渡能够这么写：

留神：当有雷同标签名的元素切换时，须要通过 key 个性设置惟一的值进行标记，从而让 Vue 辨别它们，否则 Vue 为了效率只会替换雷同标签外部的内容。
<transition>  <button v-if="docState === 'saved'" key="saved">    Edit  </button>  <button v-if="docState === 'edited'" key="edited">    Save  </button>  <button v-if="docState === 'editing'" key="editing">    Cancel  </button></transition>

（3）在一些场景中，也能够通过给同一个元素的 key 个性设置不同的状态来代替 v-if 和 v-else。下面的例子能够重写为：

<transition>  <button v-bind:key="docState">    {{ buttonMessage }}  </button></transition> // ...computed: {  buttonMessage: function () {    switch (this.docState) {      case 'saved': return 'Edit'      case 'edited': return 'Save'      case 'editing': return 'Cancel'    }  }}

2，过渡模式

（1）过渡模式经常配合多个元素或者多个组件切换时应用，有如下两种模式：

  • in-out：新元素先过渡过渡，实现之后以后元素过渡来到。（默认为该模式）
  • out-in：以后元素先过渡来到，来到实现后新元素过渡进入。
    （2）上面是一个元素组件切换样例，留神我这里将过渡模式设为（out-in）：
  • 每次点击切换按钮后，下方“组件一”“组件二”会交替切换显示。
  • 切换时，以后组件会逐步隐没，等齐全隐没后新组件逐步显示进去。

<template>  <div id="app">    <button @click="changeIndex">切换</button>    <br>    <transition name="fade" mode="out-in">      <div id="div1" v-if="index === 1" key="div1">组件1</div>      <div id="div2" v-else key="div2">组件2</div>    </transition>  </div></template> <script>export default {  name: 'App',  data: function(){    return {      index: 1, //显示的组件索引    }  },  methods: {    changeIndex() {      this.index = (this.index%2)+1;    }  }}</script> <style>  #div1 {    width:150px;    height:100px;    background:yellow;  }   #div2 {    width:150px;    height:100px;    background:orange;  }   .fade-enter-active, .fade-leave-active{    transition: all 0.5s ease  }   .fade-enter, .fade-leave-active {    opacity: 0  }</style>

3，多个组件的过渡

（1）多个组件的过渡简略很多，咱们不须要应用 key 个性，只须要应用动静组件即可。
（2）上面代码实现的性能成果同下面一样，只不过这次咱们改用动静组件实现。

<template>  <div id="app">    <button @click="changeIndex">切换</button>    <br>    <transition name="fade" mode="out-in">      <component :is="view"></component>    </transition>  </div></template> <script>export default {  name: 'App',  data: function(){    return {      index: 1, //显示的组件索引      view: "v1"    }  },  components: {    'v1': {      template: '<div style="width:150px;height:100px;background:yellow;">组件1</div>'    },    'v2': {      template: '<div style="width:150px;height:100px;background:orange;">组件2</div>'    }  },  methods: {    changeIndex() {      this.index = (this.index%2)+1;      this.view = "v" + this.index;    }  }}</script> <style>  .fade-enter-active, .fade-leave-active{    transition: all 0.5s ease  }   .fade-enter, .fade-leave-active {    opacity: 0  }</style>