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>
複製程式碼- 注意：在引用第三方動畫庫選定動畫類的的時候還要在其前面加上一個基本的類animated
個人推薦在使用Vue的時候如果動畫效果簡單自己寫就行，複雜的話在引用第三方動畫庫。而且在給元素新增動畫的時候，要考慮清楚是加全程動畫還是半程動畫就夠類。