【Vue】TransitionGroup - HackMD

與 Transition 的區別

<TransitionGroup> 基本上和 <Transition> 擁有相同的 class、props、與 JS hook listener，但還是有一些不同的地方

預設不會渲染容器元素，但你可以用 tag 這個 prop 來作為你要渲染的元素。(可以看下面的例子)
Transition Mode 不能用，因為我們不是在互斥的元件之間切換。
Group 裡面的每個元素都要有唯一的 key 值 (跟 v-for 一樣)
CSS transition class 會分配給 list 中的每個元素，而不是直接給整個群組。

記得在 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 一樣)









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

移動的 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;
}

漸進式延遲的列表動畫

我們可以利用 js hook 讀 data-attritube 來達成漸進式的動畫(一個接續一個)

看看 Vue 官網提供的例子(這裡用了 GSAP 插件來達成)
這個例子可以用上面的 input 來搜尋下方的 list，在搜尋的過程將不是搜尋結果的 item 用動畫的方式漸進式隱藏(根據 data-index 來決定延遲的秒數)。