TransitionGroup也是在實用範例有用過，
希望內容不要在這麼多了www
太多內容真的讀過也沒太多感覺 哈
<TransitionGroup> 是一個內建的組件，旨在對渲染在列表中的元素或組件的插入、移除和順序變更進行動畫處理。
與 <Transition> 的差異 - Differences from <Transition>
<TransitionGroup> 支持與 <Transition> 相同的屬性、CSS 轉場類別和 JavaScript 鉤子監聽器，但有以下差異：
- 預設情況下，它不會渲染包裹元素。不過，你可以使用 tag 屬性指定要渲染的元素。
- 轉場模式不可用，因為我們不再在互斥的元素之間進行切換。
- 內部的元素必須始終具有唯一的 key 屬性。
- 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;
}
現在效果好多了——當整個列表被打亂時，甚至可以平滑地動畫過渡。
錯開列表轉場 - 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
