EP41 - 過渡群組

TransitionGroup也是在實用範例有用過，
希望內容不要在這麼多了www
太多內容真的讀過也沒太多感覺 哈

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

與 <Transition> 的差異 - Differences from <Transition>​

<TransitionGroup> 支持與 <Transition> 相同的屬性、CSS 轉場類別和 JavaScript 鉤子監聽器，但有以下差異：

1. 預設情況下，它不會渲染包裹元素。不過，你可以使用 tag 屬性指定要渲染的元素。
2. 轉場模式不可用，因為我們不再在互斥的元素之間進行切換。
3. 內部的元素必須始終具有唯一的 key 屬性。
4. CSS 轉場類別將應用於列表中的各個元素，而不是應用於組 / 容器本身。

提示：

在 DOM 模板中使用時，應以 <transition-group> 的形式引用。

進入 / 離開轉場 - Enter / Leave Transitions​

以下是使用 <TransitionGroup> 對 v-for 列表應用進入 / 離開轉場的範例：

模板

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

CSS

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

移動轉場 - Move Transitions​

上述範例存在一些明顯的缺陷：當插入或移除項目時，其周圍的項目會立即「跳」到位置，而不是平滑地移動。我們可以通過添加一些額外的 CSS 規則來修正這個問題：

CSS

.list-move, /* 對移動的元素應用轉場 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* 確保離開的項目脫離佈局流，以便可以正確計算移動動畫。 */
.list-leave-active {
  position: absolute;
}

現在效果好多了——當整個列表被打亂時，甚至可以平滑地動畫過渡。

Full example

錯開列表轉場 - Staggering List Transitions​

透過數據屬性與 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 庫來執行動畫：

JavaScript

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

Full Example in the playground

相關文件<TransitionGroup> API reference

意外地沒有這麼多內容！耶～
同時管理大量元素的動畫效果，
使用簡化結構跟一致的過渡效果還是蠻實用的 www