前言

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

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

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

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

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

腦圖

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

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

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

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

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

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

單元素/單組件的過渡

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

多元素/多組件的過渡

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

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

列表過渡

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

狀態(tài)過渡

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

附件

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

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

END

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

如有問題，歡迎留言告知，感謝~