摘要

<TransitionGroup> 是一個專門為 v-for 渲染的列表提供進入和離開動畫的內建元件。

定義與說明

與 <Transition> 不同，<TransitionGroup> 會渲染一個真實的 DOM 元素作為包裹容器（預設為 <span>，可透過 tag 屬性修改）。它內部的每一個子元素都必須擁有一個唯一的 key 屬性。當列表中的項目被新增或移除時，它會為對應的項目應用過渡動畫。

實作範例

TransitionGroup 示例

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </TransitionGroup>
</template>
<style>
.list-enter-active, .list-leave-active { transition: all 0.5s ease; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); }
</style>

結論

<TransitionGroup> 是實現列表動畫的標準且唯一的工具。它讓新增、刪除列表項目時的視覺回饋變得平滑而直觀。

TransitionGroup 列表動畫 v-for