TransitionGroup

<TransitionGroup> 是一(yī)個內(nèi)置組件，用于對 v-for 列表中的元素或組件的插入、移除和(hé)順序改變添加動畫(huà)效果。

和(hé) <Transition> 的區(qū)别

<TransitionGroup> 支持和(hé) <Transition> 基本相同的 props、CSS 過渡 class 和(hé) JavaScript 鈎子監聽器，但(dàn)有以下(xià)幾點區(qū)别：

默認情況下(xià)，它不會渲染一(yī)個容器元素。但(dàn)你可(kě)以通(tōng)過傳入 tag prop 來指定一(yī)個元素作(zuò)為(wèi)容器元素來渲染。

過渡模式在這(zhè)裏不可(kě)用，因為(wèi)我們不再是在互斥的元素之間(jiān)進行(xíng)切換。

列表中的每個元素都(dōu)必須有一(yī)個獨一(yī)無二的 key attribute。

CSS 過渡 class 會被應用在列表內(nèi)的元素上(shàng)，而不是容器元素上(shàng)。

TIP

當在 DOM 模闆中使用時(shí)，組件名需要(yào)寫為(wèi) <transition-group>。

進入 / 離開(kāi)動畫(huà)

這(zhè)裏是 <TransitionGroup> 對一(yī)個 v-for 列表添加進入 / 離開(kāi)動畫(huà)的示例：

template

<TransitionGroup name="list" tag="ul">

<li v-for="item in items" :key="item">

{{ item }}

</li>

</TransitionGroup>

css

.list-enter-active,

.list-leave-active {

transition: all 0.5s ease;

}

.list-enter-from,

.list-leave-to {

opacity: 0;

transform: translateX(30px);

}

移動動畫(huà)

上(shàng)面的示例有一(yī)些明(míng)顯的缺陷：當某一(yī)項被插入或移除時(shí)，它周圍的元素會立即發生“跳(tiào)躍”而不是平穩地(dì)移動。我們可(kě)以通(tōng)過添加一(yī)些額外(wài)的 CSS 規則來解決這(zhè)個問(wèn)題：

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);

}

/* 确保将離開(kāi)的元素從(cóng)布局流中删除

以便能(néng)夠正确地(dì)計算移動的動畫(huà)。 */

.list-leave-active {

position: absolute;

}

漸進延遲列表動畫(huà)

通(tōng)過在 JavaScript 鈎子中讀取元素的 data attribute，我們可(kě)以實現帶漸進延遲的列表動畫(huà)。首先，我們把每一(yī)個元素的索引渲染為(wèi)該元素上(shàng)的一(yī)個 data attribute：

template

<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 對該元素的進場動畫(huà)添加一(yī)個延遲。以下(xià)是一(yī)個基于 GreenSock library 的動畫(huà)示例：

js

function onEnter(el, done) {

gsap.to(el, {

opacity: 1,

height: '1.6em',

delay: el.dataset.index * 0.15,

onComplete: done

})

}