第5章元素動畫效果課件V1.0

教學內容第一節

過渡動畫第二節自定義動畫第三節第三方動畫庫第四節列表動畫知識目標教學目標理解和掌握過渡動畫實現的方法和流程理解自定義動畫的工作過程和原理掌握第三方動畫庫和列表動畫實現的方法知識點預覽#節知識點難點重點應用5C05-01過渡動畫

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

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

<transition><div>動畫元素</div></transition>

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

在Vue中，不僅可以實現過渡動畫效果，還可以給元素添加自定義的動畫。區別是，自定義動畫中名稱為v-enter-from樣式類別在animationend事件被觸發時才移除；除可以自定義動畫外，還可以自定義動畫的樣式類別名稱。自定義動畫效果過渡動畫

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

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

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

導入成功后，就可以在組件的模板元素中，使用平臺框庫中的動畫效果了。

gsap動畫庫效果過渡動畫

動畫不僅可以作用于一個節點或一個組件上，而且還可以作用于多個節點和組件中。transition-group是新增的一個動畫組件，它可以在多個元素中應用動畫，具有以下特征：

默認情況下，它不會渲染組件包裹中某個元素，除非單獨指定某一個元素。過渡的模式不可使用，因為它不再相互切換元素的特有效果。元素內部需要提供唯一的屬性key值，用于標識動畫作用的是哪個元素。CSS過渡樣式僅作用于包裹的內部元素，不會應用于動畫組件本身。transition-group組件不僅可以在列表中實現基礎的動畫效果，還可以在列表中實現交錯過渡的效果。

transition-group組件基本功能效果過渡動畫

通過自定義CSS樣式實現的動畫效果非常有限，還面臨瀏覽器的兼容性問題。gsap動畫平臺則是一個非常不錯的選擇，該平臺不僅支持簡單的動畫效果，而且還能實現復雜的列表動畫。可以針對所