多個元素的過渡

點擊打開視頻講解更加詳細

我們之後討論多個組件的過渡，對於原生標簽可以使用 v-if/v-else。最常見的多標簽過渡是一個列表和描述這個列表為空消息的元素：

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

可以這樣使用，但是有一點需要註意：

當有相同標簽名的元素切換時，需要通過 key attribute 設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐。

示例：

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

在一些場景中，也可以通過給同一個元素的 key attribute 設置不同的狀態來代替 v-if 和 v-else，上面的例子可以重寫為：

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

使用多個 v-if 的多個元素的過渡可以重寫為綁定了動態 property 的單個元素過渡。例如：

<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>

可以重寫為：

<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'
    }
  }
}

完整案例：

<template>
  <div id="app">
    <h1>home</h1>

    <!-- 當有相同標簽名的元素切換時，需要通過 key attribute 設置唯一的值來標記以讓
     Vue 區分它們，否則 Vue 為了效率只會替換相同標簽內部的內容。即使在技術上沒有必要，
     給在 <transition> 組件中的多個元素設置 key 是一個更好的實踐。 -->
    <transition>
      <table v-if="items.length > 0">
        table
      </table>
      <p v-else>Sorry, no items found.</p>
    </transition>
    <transition name="fade">
      <button v-if="isEditing" key="save">Save</button>
      <button v-else key="edit">Edit</button>
    </transition>

    <transition name="fade">
      <button v-bind:key="isEditing">
        {{ isEditing ? "Save" : "Edit" }}
      </button>
    </transition>

    <transition name="fade">
      <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>
    <br />
    <transition name="fade">
      <button v-bind:key="docState">
        {{ buttonMessage }}
      </button>
    </transition>

    <br />
    <br />
    <button @click="change">改變</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      items: [],
      isEditing: true,
      docState: "saved",
    };
  },
  mounted() {},
  components: {},
  computed: {
    buttonMessage: function () {
      switch (this.docState) {
        case "saved":
          return "Edit";
        case "edited":
          return "Save";
        case "editing":
          return "Cancel";
      }
    },
  },
  methods: {
    change() {
      this.items = [1, 2];
      this.isEditing = !this.isEditing;
      this.docState = "edited";
    },
  },
};
</script>

<style scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateX(10px);
}

.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: all 0.2s;
}
</style>

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！