Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第05章 元素動(dòng)畫效果

第5章元素動(dòng)畫效果課件V1.0

教學(xué)內(nèi)容第一節(jié)

過渡動(dòng)畫第二節(jié)自定義動(dòng)畫第三節(jié)第三方動(dòng)畫庫第四節(jié)列表動(dòng)畫知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握過渡動(dòng)畫實(shí)現(xiàn)的方法和流程理解自定義動(dòng)畫的工作過程和原理掌握第三方動(dòng)畫庫和列表動(dòng)畫實(shí)現(xiàn)的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用5C05-01過渡動(dòng)畫

C05-02自定義動(dòng)畫1、自定義動(dòng)畫2、自定義動(dòng)畫樣式C05-03第三方動(dòng)畫庫1、animate.css2、gsap動(dòng)畫庫C05-04列表動(dòng)畫1、transition-group組件基本功能2、交錯(cuò)過渡動(dòng)畫效果

在Vue中，專門提供了一個(gè)名稱為transition的內(nèi)置組件，該組件本身和它的頂層并不渲染動(dòng)畫效果，而只是將動(dòng)畫效果應(yīng)用到被組件包裹的DOM元素上，代碼如下所示。

<transition><div>動(dòng)畫元素</div></transition>

transition組件可以實(shí)現(xiàn)的動(dòng)畫包括過渡和自定義兩種，底層都是由CSS3中的樣式來完成的，在動(dòng)畫執(zhí)行時(shí)，組件自動(dòng)生成CSS3動(dòng)畫類名屬性，格式為：name-string過渡動(dòng)畫效果過渡動(dòng)畫

在Vue中，不僅可以實(shí)現(xiàn)過渡動(dòng)畫效果，還可以給元素添加自定義的動(dòng)畫。區(qū)別是，自定義動(dòng)畫中名稱為v-enter-from樣式類別在animationend事件被觸發(fā)時(shí)才移除；除可以自定義動(dòng)畫外，還可以自定義動(dòng)畫的樣式類別名稱。自定義動(dòng)畫效果過渡動(dòng)畫

在動(dòng)畫組件transition中，可以接收自定義類別樣式的屬性有6個(gè)，名稱分別為：enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class，它們的功能與動(dòng)畫組件默認(rèn)6個(gè)類別樣式一致。自定義動(dòng)畫樣式效果過渡動(dòng)畫

animate.css是一個(gè)使用CSS樣式實(shí)現(xiàn)動(dòng)畫效果的第三方庫文件，它包含各類動(dòng)畫效果，如強(qiáng)調(diào)、切換和引導(dǎo)等，同時(shí)，它能很好地兼容各大瀏覽器，可以很方便地快速運(yùn)用到各個(gè)Web項(xiàng)目中。在使用animate.css動(dòng)畫庫之前，需要先在在項(xiàng)目文件夾下，輸入如下指令。npminstallanimate安裝成功后，在需要使用該動(dòng)畫效果的組件中導(dǎo)入該庫文件，代碼如下。import"animate.css";導(dǎo)入成功后，就可以在組件的模板元素中，使用動(dòng)畫庫的類別樣式了。animate.css效果過渡動(dòng)畫

gsap它的全稱是GreenSockAnimationPlatform，它是一個(gè)功能非常強(qiáng)大的動(dòng)畫平臺(tái)，它可以對(duì)JavaScript操作的所有內(nèi)容實(shí)現(xiàn)動(dòng)畫效果，同時(shí)，還解決了不同瀏覽器中存在的兼容性問題，而且速度和效率都非常快。在使用gsap平臺(tái)提供的動(dòng)畫之前，首先需要在項(xiàng)目文件夾下，通過下列指令來安裝gsap框架，指令如下所示。npminstallgsap安裝成功后，在需要使用該動(dòng)畫效果的組件中導(dǎo)入該庫文件，代碼如下。importgsapfrom'gsap';

導(dǎo)入成功后，就可以在組件的模板元素中，使用平臺(tái)框庫中的動(dòng)畫效果了。

gsap動(dòng)畫庫效果過渡動(dòng)畫

動(dòng)畫不僅可以作用于一個(gè)節(jié)點(diǎn)或一個(gè)組件上，而且還可以作用于多個(gè)節(jié)點(diǎn)和組件中。transition-group是新增的一個(gè)動(dòng)畫組件，它可以在多個(gè)元素中應(yīng)用動(dòng)畫，具有以下特征：

默認(rèn)情況下，它不會(huì)渲染組件包裹中某個(gè)元素，除非單獨(dú)指定某一個(gè)元素。過渡的模式不可使用，因?yàn)樗辉傧嗷デ袚Q元素的特有效果。元素內(nèi)部需要提供唯一的屬性key值，用于標(biāo)識(shí)動(dòng)畫作用的是哪個(gè)元素。CSS過渡樣式僅作用于包裹的內(nèi)部元素，不會(huì)應(yīng)用于動(dòng)畫組件本身。transition-group組件不僅可以在列表中實(shí)現(xiàn)基礎(chǔ)的動(dòng)畫效果，還可以在列表中實(shí)現(xiàn)交錯(cuò)過渡的效果。

transition-group組件基本功能效果過渡動(dòng)畫

通過自定義CSS樣式實(shí)現(xiàn)的動(dòng)畫效果非常有限，還面臨瀏覽器的兼容性問題。gsap動(dòng)畫平臺(tái)則是一個(gè)非常不錯(cuò)的選擇，該平臺(tái)不僅支持簡單的動(dòng)畫效果，而且還能實(shí)現(xiàn)復(fù)雜的列表動(dòng)畫?？梢葬槍?duì)所