8.動畫特效
-
CSS過渡動畫原理
在Vue底層中，通過**<transaction>標籤包裹的內部元素會進行自動構建動畫流程。即：Vue是通過更換元素上的class**來進行過渡動畫效果的呈現的。
下圖是CSS過渡動畫(入場動畫)的執行流程，離場動畫同理。
在過渡動畫流程中可以看出：被<transaction>包裹的內部元素會在該流程中進行class的添加和去除。
- 初始狀態：內部元素添加fade-enter、fade-enter-active
- 中間狀態：內部元素去除fade-enter，添加fade-enter-to
- 最終狀態：內部元素去除fade-enter-active、fade-enter-to
下面例子中，通過按鈕點擊事件對show的值進行該**<div>元素的顯示與否**，method以及data就不做展示了。
<transition> <div v-if="show"> Hello World </div> </transition>添加嵌入式的CSS樣式
<style type="text/css"> .v-enter, .v-leave-to { opacity: 0; } /* 當被transition包裹的元素在顯示的過程中，enter-active是一直存在。而當被包裹元素消失的過程中，leave-active是一直存在的*/ .v-enter-active, .v-leave-active { transition: opacity 3s; } </style>設置opacity變量值，通過transition進行監控opacity的值變化，變化後便進行3s的動畫過渡效果。
動畫演示：注意在<transition>包裹的內部元素的class變化*
- 入場過渡動畫
- 離場過渡動畫
TIPS：<transition>標籤可以添加name屬性，該屬性決定了過渡動畫所添加的類名。例如：name=“fade”，此時過渡動畫
所添加的class爲：fade-enter等。默認不添加name屬性時，過渡動畫的class默認是：v-enter等，例子中採用的就是默認值。
-
Animate.css庫
Animate.css 一款強大的預設css3動畫庫
改造上述例子：加入animate.css動畫庫。
-
引入animate.css動畫庫：
<link rel="stylesheet" type="text/css" href="./animate.css"> -
改造**<transition>**標籤
<!-- 採用animation.css庫中的動態CSS樣式 --> <!-- 這裏對過渡動畫中的enter-active 和 leave-active所屬的類樣式名稱更改爲animated xxx --> <transition enter-active-class="animated swing" leave-active-class="animated rubberBand" > <div v-if="show"> Hello World </div> </transition> -
動畫效果演示：
-
入場
-
離場
-
執行時長：默認的動畫執行時長是1s，詳情見下圖。
-
-
Animate.css動畫庫實際上是採用了CSS3標準下的keyframe規則，創建動畫的原理是，將一套 CSS 樣式逐漸變化爲另一套樣式。
-
-
過渡和動畫特效結合
仍然是改造上述例子：將過渡動畫和animate動畫結合使用。
-
引入嵌入式CSS樣式：
<style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style> -
改造<transition>標籤內容：
<!-- 採用animation.css庫中的動態CSS樣式 -- C3中keyframe形式的封裝動畫庫--> <!-- 這裏對過渡動畫中的enter-active 和 leave-active所屬的類樣式名稱更改爲animated xxx --> <!-- appear 自定義類名爲animation庫中的動畫效果，此時在頁面刷新時，也會具有相應設置的動畫效果，即入場動畫--> <!-- type 屬性控制動畫執行時長的控制，過渡動畫transaction爲3s，animate默認爲1s,這裏採用了過渡動畫的執行時長 --> <!-- 自定義動畫時長 :duration="5000" 或者區分入場和退場動畫：{enter:5000, leave: 10000}--> <transition type="transition" name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated rubberBand fade-leave-active" appear-active-class="animated swing" > <div v-if="show"> Hello World </div> </transition> -
測試效果：
- 頁面刷新動畫
- 入場動畫
- 離場動畫
- 頁面刷新動畫
-
-
Js動畫和Velocity.js結合
在開始本小節內容之前，我們先來了解一下網頁的交互動畫。
網頁交互動畫大概分爲：CSS動畫，Js動畫。
-
CSS動畫：
由於CSS3可以根據CSS屬性自定義動畫，所以這類動畫的優點就是不用進行計算和更改DOM會顯得非常流暢。 可以通過@keyframes規則創建動畫。 @keyframes規則內部指定一個CSS樣式和動畫將逐步從目前的樣式更改爲新的樣式。 -
Js動畫：
Js動畫擁有強大的性能，並且優於css動畫。根據Js來改變屬性值，所以沒有css那樣的侷限性，可以實現更多的功能的動畫。 -
Velocity.js：
Velocity是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。 它能和jQuery完美協作，並和$.animate()有相同的 API，但它不依賴jQuery，可單獨使用。 Velocity不僅包含了$.animate()的全部功能，還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG動畫、滾動動畫等特色功能。 它比$.animate()更快更流暢，性能甚至高於CSS3 animation，是jQuery和CSS3 transition的最佳組合，它支持所有現代瀏覽器。 -
改造例子
-
引入Velocity.js
<script src="./velocity.js"></script> -
改造**<transition>**標籤，例子僅展示出場動畫。
<!-- 綁定JS動畫鉤子事件 入場動畫before-enter、enter、after-enter --> <!-- 出場動畫對應的JS鉤子函數：before-leave、leave、after-leave --> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <div v-show="show"> Hello World </div> </transition> -
methods中添加綁定方法：在handleEnter方法中採用Velocity.js進行了改寫。
methods: { handleClick: function() { this.show = !this.show }, handleBeforeEnter: function(el) { el.style.color = 'red' el.style.opacity = 0; }, handleEnter: function(el, done) { // setTimeout(() => { // el.style.color = 'green' // }, 2000) // setTimeout(() => { // done() // }, 4000) // Js動畫庫 - velocity.js Velocity(el, { opacity: 1 }, { duration: 3000, complete: done }) }, handleAfterEnter: function(el) { el.style.color = 'green' console.log("動畫結束") } } -
Js動畫演示，僅出場動畫(點擊按鈕，紅色字樣出現，持續三秒，字樣顏色變綠色，控制檯打印信息，動畫流程結束)
-
-
-
多個元素或組件的過渡
<transition>標籤中通過mode屬性設置元素切換效果：out-in、in-out
-
多個元素
<!-- 默認情況下vue會進行DOM元素的複用，使得過渡動畫效果無法得以展示，添加key屬性值可以避免vue的DOM複用 --> <!-- mode屬性可以設置元素切換的效果 in-out、out-in--> <transition mode="out-in"> <div v-if="show" key="hello">Hello World</div> <div v-else key="bye">Bye World</div> </transition> -
多個組件
<!-- 通過動態組件的方式，實現組件的切換動畫效果 --> <transition mode="out-in"> <component :is="type"></component> </transition>
-
-
列表過渡
列表過渡通過：<transition-group>標籤實現，以下通過遍歷列表例子說明
-
使用**<transition-group>標籤做列表過渡**
<!-- 列表過渡採用transaction-group標籤 --> <transition-group> <div v-for="item of list" :key="item.id"> {{item.title}} </div> </transition-group> -
演示列表過渡
-
-
動畫封裝：採用組件的形式將常用的動畫效果進行封裝
例如：將採用Js動畫鉤子的上述案例進行組件整合如下：
-
聲明全局組件
Vue.component('fade', { props: ['show'], template: ` <transition mode="out-in" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter"> <slot v-if="show"></slot> </transition> `, methods: { handleBeforeEnter: function(el) { el.style.color = 'red'; }, handleEnter: function(el, done) { setTimeout(() => { el.style.color = 'green'; }, 2000) setTimeout(() => { done(); }, 4000) }, handleAfterEnter: function(el) { el.style.color='black'; console.log("動畫結束"); } } }) -
DOM中使用該動畫組件
<fade :show="show"> <h2>Tom and Jerry</h2> </fade>
-
