TransitionGroup ​

<TransitionGroup>是一個內建元件，用於對在列表中渲染的元素或元件的插入、刪除和順序更改進行動畫處理。

<Transition>的差異 ​

<TransitionGroup>支援與<Transition>相同的props、CSS過渡類和JavaScript鉤子監聽器，有以下差異

• 預設情況下，它不會渲染一個包裝元素。但您可以使用tag屬性指定要渲染的元素。

• 過渡模式不可用，因為我們不再在互斥元素之間交替。

• 內部元素必須具有唯一的key屬性。

• CSS過渡類將應用於列表中的單個元素，不會應用於組/容器本身。

進入/離開過渡 ​

下面是一個使用<TransitionGroup>將進入/離開過渡應用於v-for列表的示例

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

移動過渡 ​

上述示例有一些明顯的缺陷：當專案被插入或刪除時，其周圍的項會立即“跳”到新位置，而不是平滑移動。我們可以透過新增一些額外的CSS規則來解決這個問題

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

現在看起來好多了——甚至當整個列表被洗牌時也可以平滑動畫

完整示例

自定義TransitionGroup類 ​

您還可以透過將 moveClass 屬性傳遞給 <TransitionGroup> 來指定移動元素的自定義過渡類，就像在 <Transition> 上的自定義過渡類一樣，請參考自定義過渡類。

列表過渡延遲 ​

透過使用資料屬性與 JavaScript 過渡進行通訊，也可以在列表中延遲過渡。首先，我們將專案索引作為資料屬性渲染到 DOM 元素上

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

然後，在 JavaScript 鉤子中，我們根據資料屬性設定延遲來動畫化元素。此示例使用 GSAP 庫 來執行動畫

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

相關

• <TransitionGroup> API 參考