摘要

<TransitionGroup> 不僅能處理進入和離開，還能透過一種名為 FLIP 的高效能動畫技術，為列表中因排序或篩選而改變位置的項目，提供平滑的「移動」動畫。

定義與說明

當列表項目的位置發生變化時，Vue 會自動應用一個名為 v-move 的 CSS class（如果設定了 name，則為 [name]-move）。我們只需要為這個 class 添加一個 transition 屬性，Vue 的 FLIP 機制就會自動計算並應用 transform，實現流暢的移動效果。

實作範例

FLIP 移動動畫示例

/* 為移動的項目添加過渡效果 */
.list-move {
  transition: transform 0.8s ease;
}
/* 確保離開的項目能空出佈局空間，讓移動動畫更流暢 */
.list-leave-active {
  position: absolute;
}

結論

FLIP 技術與 v-move class 的結合，是 <TransitionGroup> 最令人驚豔的特性之一。它讓我們能以極低的成本，實現複雜且高效能的列表排序動畫。

FLIP 移動動畫 v-move