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 參考