?創(chuàng)作者：陳書予
🎉個(gè)人主頁：陳書予的個(gè)人主頁
🍁陳書予的個(gè)人社區(qū)，歡迎你的加入: 陳書予的社區(qū)
🌟專欄地址: 三十天精通 Vue 3

引言

一、Vue 3 過度和動(dòng)畫概述

1.1過度和動(dòng)畫的簡(jiǎn)介

過渡和動(dòng)畫是在 Vue 3 中進(jìn)行元素動(dòng)態(tài)改變時(shí)的兩種常用技術(shù)，可以通過給元素添加樣式類或者行內(nèi)樣式來實(shí)現(xiàn)過渡和動(dòng)畫效果。

Vue 3 提供了一組非常方便的 API 來處理過渡和動(dòng)畫，包括 <transition>、<transition-group>、<keep-alive>、<teleport> 等組件以及 transition、v-show、v-if 等指令。

二、Vue 3 過度

2.1 過度的簡(jiǎn)介

在 Vue 3 中，過度是一種在元素添加或刪除時(shí)添加動(dòng)畫效果的方式。過度可以與 v-if、v-show、動(dòng)態(tài)組件等指令一起使用，從而使元素的添加或刪除具有動(dòng)畫效果。

2.2 過度的語法

過渡的語法如下所示：

<transition name="fade"><div v-if="show">Hello, World!</div>
</transition>

其中，<transition> 組件的 name 屬性用來定義過渡效果的名稱，v-if 指令用來控制元素的顯示與隱藏。

2.3 過度的應(yīng)用場(chǎng)景

過渡可以用來為元素添加插入、更新或刪除時(shí)的過渡效果，常見的應(yīng)用場(chǎng)景包括：

• 頁面路由切換時(shí)的過渡效果
• 列表元素插入、更新或刪除時(shí)的過渡效果
• 表單驗(yàn)證提示信息的過渡效果

2.4 過度的鉤子函數(shù)

過度提供了一些鉤子函數(shù)，用于在過渡的不同階段執(zhí)行自定義操作，這些鉤子函數(shù)包括：

• before-enter：在元素插入之前執(zhí)行。
• enter：在元素插入過程中執(zhí)行。
• after-enter：在元素插入之后執(zhí)行。
• enter-cancelled：在元素插入被取消時(shí)執(zhí)行。
• before-leave：在元素刪除之前執(zhí)行。
• leave：在元素刪除過程中執(zhí)行。
• after-leave：在元素刪除之后執(zhí)行。
• leave-cancelled：在元素刪除被取消時(shí)執(zhí)行。

這些鉤子函數(shù)可以在 <transition> 標(biāo)簽上通過 v-on 或 @ 語法監(jiān)聽相應(yīng)的事件，例如：

<transition name="fade"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave"><div v-if="show">Hello, World!</div>
</transition>

其中，beforeEnter、enter、afterEnter、beforeLeave、leave 和 afterLeave 均為在 Vue 實(shí)例中定義的函數(shù)，用于在相應(yīng)的鉤子函數(shù)中執(zhí)行自定義操作。

2.5 過度的組合

在 Vue 3 中，我們可以將多個(gè)過渡動(dòng)畫組合在一起，以實(shí)現(xiàn)更復(fù)雜的過渡效果。Vue 3 提供了 <transition-group> 組件來實(shí)現(xiàn)這個(gè)功能。

<transition-group> 組件的語法與 <transition> 組件類似，只不過它可以包含多個(gè)元素，并為每個(gè)元素添加過渡動(dòng)畫效果。每個(gè)元素需要通過 key 屬性來指定唯一的標(biāo)識(shí)符。

下面是一個(gè) <transition-group> 的示例：

<transition-group name="fade"><div v-for="item in items" :key="item.id">{{ item.text }}</div>
</transition-group>

在這個(gè)示例中，我們?yōu)槊總€(gè)列表項(xiàng)添加了一個(gè)唯一的 key 屬性，并使用 v-for 指令將它們渲染出來。當(dāng) items 數(shù)組中的元素發(fā)生變化時(shí)，Vue 3 會(huì)自動(dòng)檢測(cè)并應(yīng)用相應(yīng)的過渡效果。

2.6 過度的自定義類名

在 Vue 3 中，我們也可以為過渡動(dòng)畫添加自定義類名，以便我們可以在 CSS 中定義自定義的過渡動(dòng)畫效果。

<transition> 和 <transition-group> 組件都支持以下四個(gè)自定義類名屬性：

• enter-class
• enter-active-class
• leave-class
• leave-active-class

這些屬性可以用來指定自定義的 CSS 類名，用于控制過渡動(dòng)畫的效果。

下面是一個(gè)使用自定義類名的示例：

<transitionname="fade"enter-class="fade-enter"enter-active-class="fade-enter-active"leave-class="fade-leave"leave-active-class="fade-leave-active"
><div v-if="show">Hello, World!</div>
</transition>

在這個(gè)示例中，我們?yōu)檫^渡動(dòng)畫添加了 enter-class、enter-active-class、leave-class 和 leave-active-class 四個(gè)自定義類名。我們可以在 CSS 中定義這些類名，以實(shí)現(xiàn)自定義的過渡動(dòng)畫效果。

三、Vue 3 動(dòng)畫

3.1 動(dòng)畫的簡(jiǎn)介

Vue 3 的動(dòng)畫是通過在組件或元素的進(jìn)入/離開過程中，應(yīng)用 CSS 過渡/動(dòng)畫效果來實(shí)現(xiàn)的。與過度類似，動(dòng)畫的實(shí)現(xiàn)需要借助 transition 和 animation 屬性，不同的是動(dòng)畫需要使用 animate 指令來觸發(fā)動(dòng)畫的進(jìn)入/離開狀態(tài)，而不是使用 transition 指令。

3.2 動(dòng)畫的語法

動(dòng)畫的語法和過度類似，需要在組件或元素中使用 v-animate 指令，并指定動(dòng)畫的進(jìn)入/離開效果。在指定動(dòng)畫效果時(shí)，需要使用 animation 或 transition 屬性，分別對(duì)應(yīng)使用 CSS 動(dòng)畫和過渡效果實(shí)現(xiàn)動(dòng)畫。

<template><div><button @click="show = !show">Toggle</button><div v-if="show" v-animate:fade>This is a animated message!</div></div>
</template><style>
.fade-enter-active, .fade-leave-active {animation: fade 0.5s;
}
.fade-enter-from, .fade-leave-to {opacity: 0;
}@keyframes fade {from {opacity: 0;}to {opacity: 1;}
}
</style>

在上述示例中，我們定義了一個(gè)名為 fade 的動(dòng)畫效果，并在 v-animate 指令中指定了該動(dòng)畫效果。CSS 中，我們定義了 fade-enter-active 和 fade-leave-active 兩個(gè)類，分別對(duì)應(yīng)動(dòng)畫進(jìn)入和離開的過渡狀態(tài)，使用 animation 屬性指定了 fade 動(dòng)畫，指定動(dòng)畫的時(shí)間為 0.5s。我們還定義了 fade-enter-from 和 fade-leave-to 兩個(gè)類，分別對(duì)應(yīng)動(dòng)畫進(jìn)入和離開的開始和結(jié)束狀態(tài)，使用 opacity 屬性指定了元素的透明度。最后，我們使用 @keyframes 定義了 fade 動(dòng)畫的具體效果，從透明度為 0 的狀態(tài)到透明度為 1 的狀態(tài)過渡。

3.3 動(dòng)畫的應(yīng)用場(chǎng)景

動(dòng)畫的應(yīng)用場(chǎng)景和過度類似，適用于需要在組件或元素進(jìn)入/離開時(shí)添加動(dòng)畫效果的場(chǎng)景，例如：

• 列表的增刪動(dòng)畫
• 表單驗(yàn)證結(jié)果的提示信息
• 點(diǎn)擊展開/收起的折疊面板
• 點(diǎn)擊切換顯示/隱藏的彈出層等

3.4 動(dòng)畫的鉤子函數(shù)

在 Vue 3 中，動(dòng)畫的鉤子函數(shù)與過度的鉤子函數(shù)類似?？梢酝ㄟ^在 <transition> 或 <animate> 元素上添加相應(yīng)的鉤子函數(shù)來處理動(dòng)畫過程中的各個(gè)狀態(tài)。下面列出了 Vue 3 中常用的動(dòng)畫鉤子函數(shù)：

• beforeEnter: 在元素被插入之前調(diào)用。
• enter: 在元素被插入后立即調(diào)用。
• afterEnter: 在元素被插入之后，并且動(dòng)畫完成之后調(diào)用。
• enterCancelled: 在動(dòng)畫被中止時(shí)調(diào)用。
• beforeLeave: 在元素被移除之前調(diào)用。
• leave: 在元素被移除后立即調(diào)用。
• afterLeave: 在元素被移除之后，并且動(dòng)畫完成之后調(diào)用。
• leaveCancelled: 在動(dòng)畫被中止時(shí)調(diào)用。
• beforeAppear: 在元素第一次被插入時(shí)調(diào)用。
• appear: 在元素第一次被插入后立即調(diào)用。
• afterAppear: 在元素第一次被插入之后，并且動(dòng)畫完成之后調(diào)用。
• appearCancelled: 在動(dòng)畫被中止時(shí)調(diào)用。

這些鉤子函數(shù)的使用方法與過度鉤子函數(shù)類似，可以在 <transition> 或 <animate> 元素上使用 v-on: 或 @ 指令來綁定對(duì)應(yīng)的鉤子函數(shù)。例如，在一個(gè)簡(jiǎn)單的淡入淡出動(dòng)畫中，可以使用以下鉤子函數(shù)：

<template><div><button @click="show = !show">Toggle</button><transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave"><p v-if="show">Hello, World!</p></transition></div>
</template><script>
export default {data() {return {show: false}},methods: {beforeEnter(el) {el.style.opacity = 0},enter(el, done) {el.offsetWidthel.style.transition = 'opacity 1s'el.style.opacity = 1done()},afterEnter(el) {el.style.transition = ''},beforeLeave(el) {el.style.opacity = 1},leave(el, done) {el.offsetWidthel.style.transition = 'opacity 1s'el.style.opacity = 0setTimeout(() => {done()}, 1000)},afterLeave(el) {el.style.transition = ''}}
}
</script><style>
.fade-enter-active,
.fade-leave-active {transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {opacity: 0;
}
</style>

在這個(gè)例子中，我們使用了 @before-enter、@enter、@after-enter、@before-leave、@leave、@after-leave 等動(dòng)畫鉤子函數(shù)來控制動(dòng)畫的不同階段。其中，@before-enter 鉤子函數(shù)在進(jìn)入動(dòng)畫之前執(zhí)行，@enter 鉤子函數(shù)在進(jìn)入動(dòng)畫時(shí)執(zhí)行，@after-enter 鉤子函數(shù)在進(jìn)入動(dòng)畫之后執(zhí)行，@before-leave 鉤子函數(shù)在離開動(dòng)畫之前執(zhí)行，@leave 鉤子函數(shù)在離開動(dòng)畫時(shí)執(zhí)行，@after-leave 鉤子函數(shù)在離開動(dòng)畫之后執(zhí)行。

我們可以在這些鉤子函數(shù)中執(zhí)行各種操作，例如設(shè)置樣式、調(diào)用方法等等，從而實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果。例如，在 before-enter 鉤子函數(shù)中，我們可以設(shè)置元素的初始狀態(tài)，在 enter 鉤子函數(shù)中，我們可以設(shè)置元素的最終狀態(tài)，在 after-enter 鉤子函數(shù)中，我們可以對(duì)元素進(jìn)行清理操作。

除了鉤子函數(shù)之外，我們還可以使用 transition 組件提供的 appear 和 mode 屬性來進(jìn)一步控制動(dòng)畫的表現(xiàn)形式。其中，appear 屬性用于控制是否在初始渲染時(shí)執(zhí)行進(jìn)入動(dòng)畫，mode 屬性用于控制動(dòng)畫的模式，包括 in-out、out-in、default 等。

3.5 動(dòng)畫的組合

動(dòng)畫可以同時(shí)使用多個(gè)過度效果來實(shí)現(xiàn)更加復(fù)雜的效果。在 Vue 3 中，可以使用 <transition-group> 標(biāo)簽來實(shí)現(xiàn)列表過渡和動(dòng)畫組合。

<transition-group> 與 <transition> 標(biāo)簽的用法類似，但有幾個(gè)不同點(diǎn)。首先，<transition-group> 可以包含多個(gè)子元素，并對(duì)它們進(jìn)行過度效果處理。其次，當(dāng)元素添加或移除時(shí)，<transition-group> 會(huì)根據(jù)不同的操作，給每個(gè)元素添加相應(yīng)的類名。

下面是一個(gè)簡(jiǎn)單的 <transition-group> 示例：

<template><div><button @click="add">Add</button><button @click="remove">Remove</button><transition-group name="list" tag="ul"><li v-for="item in items" :key="item">{{ item }}</li></transition-group></div>
</template><script>
export default {data() {return {items: [1, 2, 3]};},methods: {add() {this.items.push(this.items.length + 1);},remove() {this.items.pop();}}
};
</script><style>
.list-enter-active,
.list-leave-active {transition: all 1s;
}.list-enter,
.list-leave-to {opacity: 0;transform: translateY(30px);
}
</style>

在上面的示例中，我們使用 <transition-group> 包含了一個(gè)列表。當(dāng)我們點(diǎn)擊 Add 按鈕時(shí)，列表中會(huì)添加一項(xiàng)，這一項(xiàng)會(huì)使用過度效果添加到列表中。當(dāng)我們點(diǎn)擊 Remove 按鈕時(shí)，列表中會(huì)刪除一項(xiàng)，這一項(xiàng)會(huì)使用過度效果從列表中移除。在這個(gè)例子中，我們使用了 name="list" 屬性來為 <transition-group> 添加類名前綴，并使用了 tag="ul" 屬性來指定容器元素。

注意到這里我們需要在樣式中定義 .list-enter、.list-leave-to、.list-enter-active、.list-leave-active 四個(gè)類名，這是因?yàn)?Vue 3 在使用 <transition-group> 時(shí)，會(huì)根據(jù)不同的操作為元素添加不同的類名。

3.6 動(dòng)畫的自定義類名

除了默認(rèn)的類名外，我們還可以使用自定義類名來實(shí)現(xiàn)動(dòng)畫效果。在使用自定義類名時(shí)，我們需要在 <transition> 或 <transition-group> 上使用 enter-class、enter-active-class、leave-class、leave-active-class 四個(gè)屬性來指定自定義類名。

下面是一個(gè)使用自定義類名的示例：

<template><div><button @click="show = !show">Toggle</button><transition:enter-class="enterClass":enter-active-class="enterActiveClass":leave-class="leaveClass":leave-active-class="leaveActiveClass"><p v-if="show">Hello, world!</p></transition></div>
</template><script>
export default {data() {return {show: false,enterClass: 'my-enter-class',enterActiveClass: 'my-enter-active-class',leaveClass: 'my-leave-class',leaveActiveClass: 'my-leave-active-class',};},
};
</script><style>
.my-enter-class {opacity: 0;
}.my-enter-active-class {transition: opacity 1s;opacity: 1;
}.my-leave-class {opacity: 1;
}.my-leave-active-class {transition: opacity 1s;opacity: 0;
}
</style>

在這個(gè)示例中，我們使用了 enter-class、enter-active-class、leave-class、leave-active-class 四個(gè)屬性來指定了自定義類名，并在 <style> 中定義了對(duì)應(yīng)的 CSS 動(dòng)畫效果。在 my-enter-active-class 和 my-leave-active-class 中，我們使用了 transition 屬性來定義 CSS 動(dòng)畫的持續(xù)時(shí)間和屬性，實(shí)現(xiàn)了漸隱漸現(xiàn)的動(dòng)畫效果。

使用自定義類名可以讓我們更加靈活地控制動(dòng)畫效果，同時(shí)也可以減小 CSS 文件的體積，提高網(wǎng)頁的加載速度。

四、Vue 3 過度和動(dòng)畫的實(shí)例

4.1 Vue 3的過度示例

以下是一個(gè)簡(jiǎn)單的過渡示例，使用過渡效果實(shí)現(xiàn)一個(gè)簡(jiǎn)單的淡入淡出效果：

<template><div><button @click="toggleShow">Toggle Show</button><transition name="fade"><p v-if="show">Hello, World!</p></transition></div>
</template><script>
export default {data() {return {show: false}},methods: {toggleShow() {this.show = !this.show}}
}
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

在這個(gè)示例中，我們使用了 <transition> 組件來實(shí)現(xiàn)淡入淡出效果。在 name 屬性中設(shè)置了過渡動(dòng)畫的名稱為 “fade”，并使用 v-if 控制 p 元素的顯示與隱藏。在 style 中我們定義了過渡動(dòng)畫的樣式，控制了 opacity 的變化。

4.2 Vue 3的動(dòng)畫示例

以下是一個(gè)簡(jiǎn)單的 Vue 3 動(dòng)畫示例，通過按鈕點(diǎn)擊來切換圖片，實(shí)現(xiàn)圖片的淡入淡出效果：

<template><div><button @click="toggleImage">Toggle Image</button><transition name="fade"><img :src="imageUrl" alt="Vue logo"></transition></div>
</template><script>
export default {data() {return {imageUrl: "https://vuejs.org/images/logo.png",showImage: true,};},methods: {toggleImage() {this.showImage = !this.showImage;if (this.showImage) {this.imageUrl = "https://vuejs.org/images/logo.png";} else {this.imageUrl = "";}},},
};
</script><style>
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;
}.fade-enter,
.fade-leave-to {opacity: 0;
}
</style>

在這個(gè)示例中，我們通過 transition 組件來包裹需要過度的圖片，并定義了 name 屬性為 fade，表示過度效果的名稱。當(dāng)點(diǎn)擊 Toggle Image 按鈕時(shí)，會(huì)觸發(fā) toggleImage 方法來切換圖片，實(shí)現(xiàn)圖片的淡入淡出效果。在 style 標(biāo)簽中，我們使用 CSS 來定義了過度效果的動(dòng)畫。

五、Vue 3 過度和動(dòng)畫的進(jìn)階應(yīng)用

5.1 動(dòng)態(tài)組件的過度和動(dòng)畫

動(dòng)態(tài)組件是指在 Vue 中，通過 is 特性來動(dòng)態(tài)切換組件的類型。在切換過程中，我們可以使用 Vue 3 的過渡和動(dòng)畫來添加動(dòng)畫效果。

例如，下面的代碼演示了如何為動(dòng)態(tài)組件添加過度和動(dòng)畫：

<transition name="fade"><component :is="currentComponent"></component>
</transition>

在這個(gè)例子中，<component> 組件通過 :is 屬性綁定到一個(gè)動(dòng)態(tài)的組件類型。當(dāng) currentComponent 發(fā)生變化時(shí)，<component> 組件會(huì)根據(jù)新的類型渲染對(duì)應(yīng)的組件。

同時(shí)，我們還使用了 <transition> 組件來為切換過程添加過度和動(dòng)畫效果，其 name 屬性指定了過度效果的名稱。

5.2 列表過度和動(dòng)畫

在 Vue 3 中，我們可以使用 v-for 指令來渲染列表。類似于動(dòng)態(tài)組件，我們可以為列表項(xiàng)添加過度和動(dòng)畫效果，使得列表的添加、更新、刪除操作具有動(dòng)畫效果。

下面的例子演示了如何為列表添加過度和動(dòng)畫效果：

<transition-group name="list" tag="ul"><li v-for="(item, index) in list" :key="item.id">{{ item.text }}</li>
</transition-group>

在這個(gè)例子中，我們使用了 <transition-group> 組件來為列表添加過度和動(dòng)畫效果。name 屬性指定了過度效果的名稱，tag 屬性指定了包裹列表項(xiàng)的標(biāo)簽類型。同時(shí)，我們?cè)?<li> 標(biāo)簽上使用 v-for 指令來渲染列表項(xiàng)，key 屬性用來唯一標(biāo)識(shí)每個(gè)列表項(xiàng)，以便 Vue 可以正確地跟蹤列表項(xiàng)的添加、更新和刪除操作。

5.3 復(fù)雜場(chǎng)景下的過度和動(dòng)畫

在實(shí)際開發(fā)中，我們可能需要在更復(fù)雜的場(chǎng)景下使用過度和動(dòng)畫效果。例如，當(dāng)我們需要在列表中對(duì)某個(gè)元素進(jìn)行排序時(shí)，我們可能需要為列表中的元素添加更多的過度和動(dòng)畫效果。

下面的例子演示了如何為一個(gè)排序列表添加過度和動(dòng)畫效果：

<transition-group name="list" tag="ul"><li v-for="(item, index) in sortedList" :key="item.id" :style="{ order: item.order }">{{ item.text }}<button @click="moveUp(index)">Move Up</button><button @click="moveDown(index)">Move Down</button></li>
</transition-group>

在這個(gè)例子中，我們首先使用 v-for 指令來渲染排序列表，key 屬性用來唯一標(biāo)識(shí)每個(gè)列表項(xiàng)。然后，我們通過 <transition-group> 組件來為列表每個(gè)項(xiàng)添加過渡效果。在 組件中，我們使用了 name 屬性來定義過渡效果的名稱，并且添加了 appear 和 enter-active-class 這兩個(gè)類名來定義初始動(dòng)畫和過渡動(dòng)畫。同時(shí)，我們還為列表項(xiàng)添加了刪除按鈕，并在按鈕的 click 事件中調(diào)用了 removeItem 方法來刪除列表項(xiàng)。

六、Vue 3 過度和動(dòng)畫的常見問題及解決方案

6.1 過度和動(dòng)畫的性能問題

過度和動(dòng)畫可以增強(qiáng)用戶體驗(yàn)，但如果不加以限制，可能會(huì)對(duì)應(yīng)用程序的性能產(chǎn)生負(fù)面影響。以下是一些可以幫助提高過度和動(dòng)畫性能的方法：

• 避免過渡和動(dòng)畫過多地嵌套在嵌套組件中。
• 盡可能使用 CSS3 動(dòng)畫，而不是 JavaScript 動(dòng)畫。
• 對(duì)于列表中的元素，使用 代替 以避免不必要的重渲染。
• 避免使用過渡和動(dòng)畫在移動(dòng)端上。

6.2 過度和動(dòng)畫的兼容性問題

雖然大多數(shù)現(xiàn)代瀏覽器都支持過度和動(dòng)畫，但仍有一些瀏覽器可能無法支持某些 CSS 屬性或 JavaScript 方法，導(dǎo)致過度和動(dòng)畫無法正常工作。在使用過度和動(dòng)畫時(shí)，應(yīng)該測(cè)試和檢查在不同瀏覽器上的表現(xiàn)，以確保其兼容性。

6.3 過度和動(dòng)畫的調(diào)試技巧

在調(diào)試過度和動(dòng)畫時(shí)，以下是一些有用的技巧：

• 使用 Vue Devtools 來檢查組件樹和過度狀態(tài)。
• 使用瀏覽器的開發(fā)者工具來檢查元素和樣式。
• 使用 Chrome 的動(dòng)畫面板來檢查和調(diào)試動(dòng)畫。
• 在過度和動(dòng)畫上添加 Vue 的調(diào)試信息。

6.4 過度和動(dòng)畫的常見錯(cuò)誤及解決方案

在使用過渡和動(dòng)畫時(shí)，常見的錯(cuò)誤包括：

• 忘記添加 key 屬性導(dǎo)致重渲染問題。
• 忘記在組件上添加 name 屬性。
• 在過渡組件上使用了 v-show 指令。
• 在動(dòng)畫組件上使用了 v-if 指令。

這些問題的解決方案包括：

• 在每個(gè)元素上添加 key 屬性。
• 在過渡組件上添加 name 屬性。
• 避免在過渡組件上使用 v-show 指令。
• 避免在動(dòng)畫組件上使用 v-if 指令。