## 與 Transition 的區別
`<TransitionGroup>` 基本上和 `<Transition>` 擁有相同的 class、props、與 JS hook listener，但還是有一些不同的地方
1. 預設不會渲染容器元素，但你可以用 `tag` 這個 prop 來作為你要渲染的元素。(可以看下面的例子)
3. **Transition Mode** 不能用，因為我們不是在互斥的元件之間切換。
4. Group 裡面的每個元素都要有唯一的 key 值 (跟 v-for 一樣)
5. CSS transition class 會分配給 list 中的每個元素，而不是直接給整個群組。

:::warning
記得在 DOM template 時要寫成 `<transition-group>`
:::

## 進入與離開動畫的 Transition

以下是用 `v-for` 呈現的 `<TransitionGroup>`動畫

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

* css 動畫(這裡都和 [transition](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions) 一樣)

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

[效果](https://vuejs.org/guide/built-ins/transition-group.html#enter-leave-transitions)

## 移動的 Transition
從上面的動畫應該可以看出來有個很大的缺點: 動畫之間的切換是直接跳過去，中間沒有過度的動畫。

* 可以利用 move 這個 css class 來修正

.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;
}

[效果](https://vuejs.org/examples/#list-transition)

## 漸進式延遲的列表動畫
我們可以利用 [js hook](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) 讀 data-attritube 來達成漸進式的動畫(一個接續一個)

看看 Vue 官網提供的[例子](https://vuejs.org/guide/built-ins/transition-group.html#staggering-list-transitions)(這裡用了 GSAP 插件來達成)
這個例子可以用上面的 input 來搜尋下方的 list，在搜尋的過程將不是搜尋結果的 item 用動畫的方式漸進式隱藏(根據 data-index 來決定延遲的秒數)。