Vue入門指南-06 Vue中的動畫(快速上手vue)

Vue · 發表 2019-03-30 00:21:09

摘要： Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具：在 CSS 過渡和動畫中自動應用 class 可以配合使用第三方 CSS 動畫庫，如 Animate.css 在過渡鉤子函式中使用 JavaScript 直接操作 DOM ...

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。包括以下工具：

在 CSS 過渡和動畫中自動應用 class
可以配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函式中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js

Vue中的全程動畫

第一步：需要把動畫控制的元素用一個transition元素包裹起來，這個元素是Vue官方提供的。

例如：
// <transition> <h3>我被transition元素包裹有了動畫效果</h3> </transition>
複製程式碼

第二步：需要在style中定義你要控制元素的動畫效果, Vue官方提供了6個class切換。

<style>
// 一般情況下， 元素的其實狀態和終止狀態的動畫是一樣的。
// v-enter（這是一個時間點）是元素進入之前的其實狀態，此時還沒有開始進入。
// v-lealve-to（這是一個時間點）是動畫離開之後的終止狀態，此時動畫已經結束。
v-enter, v-leave-to{
opctity: 0 translateX(150px)
}
// v-enter-active是入場動畫的時間段
// v-leave-active是離場動畫的時間段
v-enter-active，v-leave-active{
transition： all 0.4s ease
}
</style>
複製程式碼

第三步：可以給動畫新增時間屬性 :duration

// 設定 :duration="毫秒值" 屬性來統一設定入場和離場動畫的時長
例如：設定入場和離場的動畫時長為200毫秒
<transition :duration="200"> <h3>我被transition元素包裹有了動畫效果</h3> </transition>
// 可以給:duration的值為一個物件，分別設定入場和離場的動畫時長
例如：
<transition :duration="{enter:200, leave:400}"> <h3>我設定了入場和離場的動畫時長</h3> </transition>
複製程式碼

第四步：我們可以自定義動畫的字首 v- 將其替換為自定義的

例如：
<style>
my-enter, my-leave-to{
opctity: 0 translateX(150px)
}
my-enter-active，my-leave-active{
transition： all 0.4s ease
}
</style>
<transition name="my"> <h3>自定義動畫的v-字首</h3> </transition>
複製程式碼

注意：在實現列表過濾的時候，如果需要過度的元素是通過v-for迴圈出來的，不能使用 transition 元素包裹，需要使用 transition-group 元素包裹。
注意：再給 transition 和 transition-group 元素新增 appear 屬性，可以實現頁面創建出來的入場時候的動畫。
注意：通過為 transition 和 transition-group 元素設定 tag 屬性來指定渲染的標籤元素，如果不指定預設渲染為 span 標籤元素。
注意：通過為 transition 和 transition-group 元素設定 mode 屬性來提供過度模式

// 當前元素先進行過度，完成之後新元素過度進入
<transition mode="out-in"> <h3>設定動畫過度模式</h3> </transition>
// 新元素先進行過度，完成之後當前元素過度離開
<transition mode="in-out"> <h3>設定動畫過度模式</h3> </transition>
複製程式碼

Vue中的半程動畫

// 第一步同樣將被動畫控制的元素用transition元素包裹起來
// 第二步呼叫鉤子函式， 這裡只介紹部分鉤子，其餘的動畫鉤子請移步到官網檢視
<transition 
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<h1>半程動畫</h1></transition>
// 第三步在配置物件中的methods屬性中定義方法
new Vue({
el: "#app",
methods: {
// 注意：動畫鉤子函式的第一個引數 el 表示要執行動畫的那個DOM元素，是個原生的js DOM元素
// beforeEnter函式表示動畫入場之前，此時動畫還未開始，此時編輯動畫之前的樣式
beforeEnter (el) {
el.style.transform = "translate(0,0)"
},
// enter函式表示動畫開始之後，這裡可以設定完成動畫之後的結束狀態
enter (el) {
// 注意：這裡要加一句el.offsetWidth/Height/Left/Right,這句話沒有實際的作用。
// 但是如果不寫，不會出來動畫效果，這裡可以認為它會強制動畫重新整理。
el.offsetWidth
el.style.transform = "translate(150px, 450px)"
el.style.transiton = all 1s ease
done()
},
// 動畫完成之後會呼叫這個函式
afterEnter (el) {
// 這裡寫動畫完成以後的樣式
}
}
})
複製程式碼

注意：在只用JavaScript過度的時候，在enter和leave中必須使用done進行回撥，否則他們將被同步呼叫，過度會立即完成，看不到動畫效果。

Vue中使用第三方類實現動畫（全程）

我們可以通過以下特性來自定義過渡類名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

例如：引入第三方 Animate.css 動畫庫

// 在動畫庫中選取我們想要的動畫效果名稱，例如入場選 bounceln, 離場 bounceOut
<transition 
enter-active-class="animated bounceln"
leave-active-class="animated bounceOut"
> <h3>引用第三方動畫庫</h3> </transition>
複製程式碼