TransitionGroup

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

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

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

默認情況下(xià)，它不會(huì)渲染一個容器元素。但(dàn)你(nǐ)可以通過傳入 tag prop 來(lái)指定一個元素作(zuò)爲容器元素來(lái)渲染。

過渡模式在這(zhè)裏不可用(yòng)，因爲我們不再是在互斥的元素之間進行切換。

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

CSS 過渡 class 會(huì)被應用(yòng)在列表内的元素上(shàng)，而不是容器元素上(shàng)。

TIP

當在 DOM 模闆中使用(yòng)時(shí)，組件名需要寫爲 <transition-group>。

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

這(zhè)裏是 <TransitionGroup> 對(duì)一個 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)面的示例有一些(xiē)明(míng)顯的缺陷：當某一項被插入或移除時(shí)，它周圍的元素會(huì)立即發生“跳躍”而不是平穩地移動。我們可以通過添加一些(xiē)額外(wài)的 CSS 規則來(lái)解決這(zhè)個問題：

css

.list-move, /* 對(duì)移動中的元素應用(yòng)的過渡 */

.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)夠正确地計(jì)算(suàn)移動的動畫(huà)。 */

.list-leave-active {

position: absolute;

}

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

通過在 JavaScript 鈎子中讀取元素的 data attribute，我們可以實現(xiàn)帶漸進延遲的列表動畫(huà)。首先，我們把每一個元素的索引渲染爲該元素上(shàng)的一個 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 對(duì)該元素的進場動畫(huà)添加一個延遲。以下(xià)是一個基于 GreenSock library 的動畫(huà)示例：

js

function onEnter(el, done) {

gsap.to(el, {

opacity: 1,

height: '1.6em',

delay: el.dataset.index * 0.15,

onComplete: done

})

}