乐趣区

关于前端:Vue2-Transition过渡动画的使用3多个元素组件的过渡

jiezi

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

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>
退出移动版