TransitionGroup ​

<TransitionGroup> 是一個內置組件，用於對 v-for 列表中的元素或組件的插入、移除和順序改變添加動畫效果。

和 <Transition> 的區別 ​

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 過渡 class 和 JavaScript 鉤子監聽器，但有以下幾點區別：

• 默認情況下，它不會渲染一個容器元素。但你可以通過傳入 tag prop 來指定一個元素作為容器元素來渲染。

• 過渡模式在這裡不可用，因為我們不再是在互斥的元素之間進行切換。

• 列表中的每個元素都必須有一個獨一無二的 key 屬性。

• CSS 過渡 class 會被應用在列表內的元素上，而不是容器元素上。

進入 / 離開動畫 ​

這裡是 <TransitionGroup> 對一個 v-for 列表添加進入 / 離開動畫的示例：

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

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

移動動畫 ​

上面的示例有一些明顯的缺陷：當某一項被插入或移除時，它周圍的元素會立即發生“跳躍”而不是平穩地移動。我們可以通過添加一些額外的 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;
}

現在它看起來好多了，甚至對整個列表執行洗牌的動畫也都非常流暢：

完整的示例

漸進延遲列表動畫 ​

通過在 JavaScript 鉤子中讀取元素的 data 屬性，我們可以實現帶漸進延遲的列表動畫。首先，我們把每一個元素的索引渲染為該元素上的一個 data 屬性：

<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 鉤子中，我們基於當前元素的 data attribute 對該元素的進場動畫添加一個延遲。以下是一個基於 GSAP library 的動畫示例：

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

參考

• <TransitionGroup> API 參考