前言

??最近重新夯實(shí)Vue3，梳理的相關(guān)知識(shí)點(diǎn)和細(xì)節(jié)

??目前進(jìn)度：

• 第1部分：**基礎(chǔ)**^[2] ?

• 第2部分：**深入組件**^[3] ?

本文關(guān)于Vue3中的過(guò)渡和動(dòng)畫(huà)，我將相關(guān)內(nèi)容整理成6張腦圖，一來(lái)可以快速了解過(guò)渡和動(dòng)畫(huà)，二來(lái)方便以后查看！內(nèi)容如下?

腦圖

過(guò)渡和動(dòng)畫(huà)概述

如果沒(méi)有接觸過(guò)，你一定會(huì)想Vue中如何使用過(guò)渡和動(dòng)畫(huà)？

簡(jiǎn)單概述，Vue內(nèi)置了<transition>和<transition-group>兩個(gè)組件，用于更方便的處理過(guò)渡和動(dòng)畫(huà)，同時(shí)也可以使用class和style激活動(dòng)畫(huà)和過(guò)渡

基于class和style的過(guò)渡和動(dòng)畫(huà)

可以通過(guò)添加一個(gè)條件class來(lái)激活動(dòng)畫(huà)，style也是類(lèi)似，本質(zhì)上v-bind動(dòng)態(tài)綁定

為了更好的性能，一方面我們可以使用不觸發(fā)重繪的屬性，如Transform和Opacity；另外一方面可以對(duì)動(dòng)畫(huà)進(jìn)行硬件加速，如通過(guò)perspective、backface-visibility 和 transform:translateZ(x)等

單元素/單組件的過(guò)渡

核心點(diǎn)是使用Vue內(nèi)置transition組件配合v-if和v-show實(shí)現(xiàn)單元素/單組件的過(guò)渡

多元素/多組件的過(guò)渡

多元素的過(guò)渡需要配合v-if/v-else-if/v-else指令

多個(gè)組件若每次只渲染一個(gè)，只需包裹動(dòng)態(tài)組件即可實(shí)現(xiàn)；若要渲染多個(gè)，則要使用之后要講的列表過(guò)渡

列表過(guò)渡

使用<transition-group>包裹要渲染的組件,配合v-for

狀態(tài)過(guò)渡

狀態(tài)過(guò)渡其實(shí)就是純數(shù)據(jù)元素的過(guò)渡，可以結(jié)合Vue提供的東西，如監(jiān)聽(tīng)器、響應(yīng)性和組件系統(tǒng)等，制作出各種有意思的東西

附件

我已將以上原圖及源文件已上傳github：github.com/jCodeLife/m…^[4]

一來(lái)方便大家批量下載，二來(lái)可以根據(jù)自己的想法和習(xí)慣進(jìn)行修改

END

以上就是Vue中過(guò)渡和動(dòng)畫(huà)相關(guān)的所有內(nèi)容

如有問(wèn)題，歡迎留言告知，感謝~