本篇文章主要寫了Vue過渡和動畫基礎、多個元素過渡和多個組件過渡，以及列表過渡的動畫效果展示。詳細案例分析、GIF動圖演示、附源碼地址獲取。 ...
前言
本篇隨筆主要寫了Vue過渡和動畫基礎、多個元素過渡和多個組件過渡，以及列表過渡的動畫效果展示。詳細案例分析、GIF動圖演示、附源碼地址獲取。
作為自己對Vue過渡和動畫效果知識的總結與筆記。
因內容有案例解讀，代碼實現，導致篇幅稍長，大約3分鐘可以瀏覽完，如有需要的話（請筆友耐心看完，也可按目錄查找所需內容）
如需要全部案例代碼：請到文章末尾獲取（百度網盤鏈接，全套案例源碼）
案例實現模版：
PS: 點擊模版後的 --> 
這個標誌可以瀏覽目錄結構，以便快速定位需要的內容
以下案例均是基於此模版實現的（以第一個案例為例）
效果展示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <!-- 此處為引用JS、CSS等文件區、且css,文件與html文件在同一目錄下 --> 10 <script src="velocity.js"></script> 11 <script src="vue.js"></script> 12 <script src="velocity.min.js"></script> 13 <script src="lodash.js"></script> 14 <script src="lodash.min.js"></script> 15 16 <link rel="stylesheet" href="animate.css"> 17 <link rel="stylesheet" href="animate.min.css"> 18 19 <!-- 此處為樣式引用 --> 20 <style> 21 /* 圖形的初始狀態 */ 22 .chart { 23 width: 200px; 24 height: 50px; 25 background-color: orange; 26 } 27 28 /* 進入和離開的過程 */ 29 .box-enter-active, 30 .box-leave-active { 31 transition: width 3s; 32 /* width的變化，動畫時間是3秒 */ 33 } 34 35 /* 進入初始狀態 和 離開的結束狀態*/ 36 .box-enter, 37 .box-leave-to { 38 width: 0px; 39 } 40 41 /* 進入的結束狀態 和 離開的初始狀態 */ 42 .box-enter-to, 43 .box-leave { 44 width: 200px; 45 } 46 </style> 47 </head> 48 49 <body> 50 51 <!-- 此處為主代碼區 --> 52 <div id="app"> 53 <button @click="toggle">改變圖形寬度</button> 54 <transition name="box"> 55 <div class="chart" v-if="show"></div> 56 </transition> 57 </div> 58 <script> 59 var vm = new Vue({ 60 el: '#app', 61 data: { 62 show: true, 63 }, 64 methods: { 65 toggle() { 66 this.show = !this.show // 每次都取反 67 } 68 } 69 }) 70 </script> 71 72 </body> 73 74 </html>
一、Vue過渡和動畫基礎
1.什麼是過渡和動畫
過渡，簡而言之，就是從一個狀態向另外一個狀態插入值，新的狀態替換了舊的狀態。
通過<transition>標簽搭配CSS動畫（如@keyframes）可以實現動畫效果。動畫相比過渡來說，動畫可以在一個聲明中設置多個狀態，例如，可以在動畫20%的位置設置一個關鍵幀，然後在動畫50%的位置設置一個完全不同的狀態。另外，<transition>標簽還提供了一些鉤子函數，可以結合JavaScript代碼來完成動畫效果。
（1）代碼：
1 <style> 2 /* 圖形的初始狀態 */ 3 .chart { 4 width: 200px; 5 height: 50px; 6 background-color: orange; 7 } 8 /* 進入和離開的過程 */ 9 .box-enter-active, .box-leave-active { 10 transition: width 3s; /* width的變化，動畫時間是3秒 */ 11 } 12 /* 進入初始狀態 和 離開的結束狀態*/ 13 .box-enter, .box-leave-to { 14 width: 0px; 15 } 16 /* 進入的結束狀態 和 離開的初始狀態 */ 17 .box-enter-to, .box-leave { 18 width: 200px; 19 } 20 </style> 21 <script src="vue.js"></script> 22 </head> 23 <body> 24 <div id="app"> 25 <button @click="toggle">改變圖形寬度</button> 26 <transition name="box"> 27 <div class="chart" v-if="show"></div> 28 </transition> 29 </div> 30 <script> 31 var vm = new Vue({ 32 el: '#app', 33 data: { 34 show: true, 35 }, 36 methods: { 37 toggle () { 38 this.show = !this.show // 每次都取反 39 } 40 } 41 }) 42 </script>
（2）效果展示：
2.transition組件
Vue為<transition>標簽內部的元素提供了3個進入過渡的類和3個離開過渡的類，
|
過渡類型 |
說明 |
|
v-enter |
進入過渡的開始狀態，作用於開始的一幀 |
|
v-enter-active |
進入過渡生效時的狀態，作用於整個過程 |
|
v-enter-to |
進入過渡的結束狀態，作用於結束的一幀 |
|
v-leave |
離開過渡的開始狀態，作用於開始的一幀 |
|
v-leave-active |
離開過渡生效時的狀態，作用於整個過程 |
|
v-leave-to |
離開過渡的結束狀態，作用於結束的一幀 |
上表中6個CSS類名在進入和離開的過渡中切換的存在周期如下圖所示：
3.自定義類名
Vue中的transition組件允許使用自定義的類名。如果使用自定義類名，則不需要給<transition>標簽設置name屬性。自定義類名是通過屬性來設置的，具體屬性如下。
- 進入：enter-class、 enter-active-class、 enter-to-class
- 離開：leave-class、 leave-active-class、 leave-to-class
自定義類名的優先順序高於普通類名，所以能夠很好地與其他第三方CSS庫結合使用。 animate.css是一個跨瀏覽器的CSS3動畫庫，它內置了很多經典的CSS3動畫，使用起來很方便。接下來，我們將通過animate.css動畫庫來演示自定義類名的使用。
（1）實現步驟：
- 下載並引入animate.css動畫庫
首先從官方網站獲取animate.css文件，保存到文件目錄中。其次創建html文件，併在文件中引入animate.css文件
- 編寫HTML結構代碼
animated是基本的類名，bounceInLeft是動畫的類名
- 編寫JavaScript代碼
（2）代碼：
1 <div id="app"> 2 <button @click="show=!show">顯示/隱藏</button> 3 <transition enter-active-class="animated bounceInLeft" 4 leave-active-class="animated bounceOutLeft"> 5 <p v-if="show">過渡文字效果</div> 6 </transition> 7 </div> 8 <script> 9 var vm = new Vue({ 10 el: '#app', 11 data: { show: true } 12 }) 13 </script>
註意：
動畫效果都是在事件處理方法中控制的，在元素初始渲染時（頁面剛打開時）並沒有動畫效果。可以通過給transition組件設置appear屬性來給元素添加初始渲染的動畫效果。
（3）效果展示：
改：
1 <div id="app"> 2 <button @click="show=!show">顯示/隱藏</button> 3 <transition appear appear-active-class="animated swing" 4 enter-active-class="animated bounceIn" 5 leave-active-class="animated bounceOut"> 6 <div v-if="show">過渡文字效果</div> 7 </transition> 8 </div> 9 <script> 10 var vm = new Vue({ el: '#app', data: { show: true } }) 11 </script>
上述代碼中，appear表示開啟此特性，appear-class表示初始class樣式，appear-to-class表示過渡完成的class樣式，appear-active-class會應用在整個過渡過程中。
（3）效果展示：
4.使用@keyframes創建CSS動畫
（1）實現步驟：
@keyframes規則創建動畫，就是將一套CSS樣式逐步演變成另一套樣式，在創建動畫過程中，可以多次改變CSS樣式，通過百分比或關鍵詞from和to（等價於0%和100%）來規定動畫的狀態。
（2）代碼：
1 <style> 2 div.circular { 3 width: 100px; 4 height: 100px; 5 background: red; 6 border-radius: 50%; 7 margin-top: 20px; 8 text-align: center; 9 line-height: 100px; 10 color: #fff; 11 } 12 .bounce-enter-active { 13 animation: Ami .5s; 14 } 15 .bounce-leave-active { 16 animation: Ami .5s; 17 } 18 @keyframes Ami { 19 0% {transform: scale(0); background: red;} 20 20% {transform: scale(1); background: burlywood;} 21 50% {transform: scale(1.5); background: blueviolet;} 22 100% {transform: scale(1); background: burlywood;} 23 } 24 </style> 25 <script src="vue.js"></script> 26 </head> 27 <body> 28 <div id="app"> 29 <button @click="show=!show">使用@keyframes創建CSS動畫</button> 30 <transition name="bounce"> 31 <div class="circular" v-if="show">圓形</div> 32 </transition> 33 </div> 34 <script> 35 var vm = new Vue({ el: '#app', data: { show: true } }) 36 </script>
（3）效果展示：
5.鉤子函數實現動畫
（1）實現步驟：
在<transition>標簽中定義了一些動畫鉤子函數，用來實現動畫。鉤子函數可以結合CSS過渡（transitions）、動畫（animations）使用，還可以單獨使用。
（2）代碼：
1 <div id="app"> 2 <transition 3 @before-enter="beforeEnter" 4 @enter="enter" 5 @after-enter="afterEnter" 6 @enter-cancelled="enterCancelled" 7 @before-leave
