前言

本篇隨筆主要寫了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="beforeLeave"
 8       @leave="leave"
 9       @after-leave="afterLeave"
10       @leave-cancelled="leaveCancelled"
11       v-bind:css="false">
12     </transition>
13   </div>
14   <script>
15     // 具體案例演示可以參考demo15.html
16     var vm = new Vue({
17       el: '#app',
18       methods: {
19         // beforeEnter入場鉤子
20         // 影片入場之前，此時影片尚未開始，設定元素開始影片之前的起始樣式
21         beforeEnter (el) {},
22         // enter用于設定影片開始之后的樣式 
23         enter (el, done) { 
24           // ...
25           done()
26         },
27         // 在入場影片完成之后會呼叫
28         afterEnter (el) {},
29         enterCancelled (el) {},
30         // 出場鉤子
31         beforeLeave (el) {},
32         leave (el, done) {
33           // ...
34           done()
35         },
36         afterLeave (el) {}, 
37         leaveCancelled (el) {},
38       }
39     })
40   </script>

6.Vue結合Velocity.js實作影片

（1）實作步驟：

下載并引入velocity.min.js檔案

首先從官方網站獲取velocity.min.js檔案，保存到檔案目錄中，其次創建html檔案，并在檔案中引入velocity.min.js檔案

撰寫HTML結構代碼

beforeEnter和enter兩個入場影片函式，leave是出場影片函式

撰寫JavaScript代碼

（2）示例代碼：

 1  <div id="app">
 2     <button @click="show=!show">影片效果</button>
 3     <transition @before-enter="beforeEnter" @enter="enter"
 4      @leave="leave" v-bind:css="false">
 5       <p v-if="show">文字影片效果</p>
 6     </transition>
 7   </div>  
 8   <script>
 9     var vm = new Vue({
10       el: '#app',
11       data: {
12         show: false,
13       },
14       methods: {
15         beforeEnter (el) {
16           el.style.opacity = 0                      // 透明度為0
17           el.style.transformOrigin = 'left'    // 設定旋轉元素的基點位置
18           el.style.color = 'red'                    // 顏色為紅色
19         },
20         enter (el, done) {            // duration影片執行時間
21           Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
22           Velocity(el, { fontSize: '1em' }, { complete: done })
23         },
24         leave (el, done) {
25           Velocity(el, { translateX: '15px', rotateZ: '50deg' },
26           {duration: 3000})
27           Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
28           Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0}, { complete: done } )
29         }
30       }
31     })
32   </script>

（3）效果展示：

二、多個元素過渡

1.不同標簽名元素過渡

（1）實作步驟：

不相同標簽名元素可以使用v-if和v-else來進行過渡

（2）代碼：

 1 <div id="app">
 2     <transition>
 3       <ul v-if="items.length > 0">
 4         <li>專案1</li>
 5         <!-- 專案... -->
 6       </ul>
 7       <p v-else>抱歉，沒有找到您查找的內容，</p>
 8     </transition>
 9   </div>  
10   <script>
11     var vm = new Vue({ el: '#app', data: { items: [] } })
12   </script>

（3）效果展示：

2.相同標簽名元素過渡

當有相同標簽名的元素切換時，需要通過key特性設定唯一值來標記，從而讓Vue區分它們，因為Vue為了效率只會替換相同標簽中的內容，下面通過案例演示當有相同標簽名button時，使用v-if和v-else設定key值來實作切換，

（1）實作步驟：

給同一個元素的key屬性設定不同的狀態來代替v-if和v-else，
使用多個v-if結合key屬性來實作相同標簽名的過渡效果，
代碼是使用的v-if條件語進行判斷的，在這里使用computed計算屬性來監控變數show的變化，在頁面上進行資料系結來展示結果

（2）代碼：

案例一：使用v-if和v-else設定key值來實作切換

 1  <div id="app">
 2     <button @click="isEditing = !isEditing">切換保存和編輯按鈕</button>
 3     <div>
 4       <transition name="fade">
 5         <button v-if="isEditing" key="save">保存</button>
 6         <button v-else key="edit">編輯</button>
 7       </transition>
 8     </div>
 9   </div>
10   <script>
11     var vm = new Vue({
12       el: '#app',
13       data: { isEditing: true }
14     })
15   </script>

案例二：同一個元素的key屬性設定不同的狀態來代替v-if和v-else

 1   <div id="app">
 2     <button @click="isEditing = !isEditing">切換保存和編輯按鈕</button>
 3     <div>
 4       <transition name="fade">
 5         <button v-bind:key="isEditing">
 6           {{isEditing ? '保存' : '編輯'}}
 7         </button>
 8       </transition>
 9     </div>
10   </div>
11   <script>
12     var vm = new Vue({ el: '#app', data: { isEditing: true } })
13   </script>

（3）效果展示：

案例三：使用多個v-if結合key屬性來實作相同標簽名的過渡效果

 1 <style>
 2     .row-enter { width: 0px; }
 3     .row-enter-active { transition: width 3s;  }
 4     .row-enter-to{ width: 200px; }
 5     .red { background: red; height: 20px; }
 6     .blue { background: blue; height: 20px;  }
 7     .yellow { background: yellow; height: 20px;  }
 8   </style>
 9   <script src="vue.js"></script>
10 </head>
11 <body>
12   <div id="app">
13     <button @click="showNum">切換</button>
14     <div>
15       <transition name="row">
16         <div class="red" v-if="show == 'A'" key="A"></div>
17         <div class="blue" v-if="show == 'B'" key="B"></div>
18         <div class="yellow" v-if="show == 'C'" key="C"></div>
19       </transition>
20     </div>
21   </div>
22   <script>
23   var vm = new Vue({
24     el: '#app',
25     data: { show: 'A' }, // 初始化show的值為A
26     methods: {
27       showNum () {
28         if (this.show == 'A') {
29           return this.show = 'B'
30         } else if (this.show == 'B') {
31           return this.show = 'C'
32         } else {
33           return this.show = 'A'
34         }
35       }
36     }
37   })
38   </script>

（3）效果展示：

3.過渡模式

新舊兩個元素參與過渡的時候，新元素的進入和舊元素的離開會同時觸發，這是因為<transition>的默認行為進入和離開同時發生了，如果要求離開的元素完全消失后，進入的元素再顯示出來（如開關的切換），可以使用transition提供的過渡模式mode，來解決當一個組件離開后，另一個組件進來時發生的位置的閃動或阻塞問題，

（1）實作步驟：

過渡模式的原理是，設定有序的過渡而不是同時發生過渡，在transition中加入mode屬性，它的兩個值如下所示，

in-out ：表示新元素先進行過渡，完成之后當前元素過渡離開
out-in：表示當前元素先進行過渡，完成之后新元素過渡進入

使用out-in實作開關的切換過渡效果，

（2）代碼：

 1  <style>
 2     .fade-enter, .fade-leave-to { opacity: 0; }
 3     .fade-enter-active, .fade-leave-active { transition: opacity .5s; }
 4   </style>  
 5   <script src="vue.js"></script>
 6 </head>
 7 <body>
 8   <div id="app">
 9     <transition name="fade" mode="out-in">
10       <button :key="isOff" @click="isOff = !isOff">{{isOff ? 'Off' : 'On'}}</button>
11     </transition>
12   </div>
13   <script>
14     var vm = new Vue({ el: '#app', data: { isOff: false } })
15   </script>

（3）效果展示：

三、多個組件過渡

1.什么是多個組件過渡

多個組件之間的過渡，只需要使用動態組件即可，動態組件需要通過Vue中的<component>元素系結is屬性來實作多組件的過渡，接下來通過案例演示如何實作多個組件的過渡，

2.案例演示

（1）實作步驟：

定義登錄組件
撰寫CSS代碼
撰寫JS代碼

（2）代碼：

 1 <style>
 2     .fade-enter-active, .fade-leave-active {
 3       transition: opacity .5s ease;
 4     }
 5     .fade-enter, .fade-leave-to {
 6       opacity: 0;
 7     }
 8   </style>  
 9   <script src="vue.js"></script>
10 </head>
11 <body>
12   <!-- 定義登錄組件 -->
13   <template id="example1">
14     <span>我是登錄組件</span>
15   </template>
16   <!-- 定義注冊組件 -->
17   <template id="example2">
18     <span>我是注冊組件</span>
19   </template>
20   <div id="app">
21     <a href="javascript:;" @click="compontentName='example1'">登錄</a>
22     <a href="javascript:;" @click="compontentName='example2'">注冊</a>
23     <transition name="fade" mode="in-out">
24       <component :is="compontentName"></component>
25     </transition>
26   </div>
27   <script>
28     Vue.component('example1', {template: '#example1'})
29     Vue.component('example2', {template: '#example2'})
30     var vm = new Vue({
31       el: '#app',
32       data: { compontentName: '' }
33     })
34   </script>

（3）效果展示：

四、串列過渡

1.什么是串列過渡

串列過渡，需要使用v-for和transition-group組件來實作，

transition-group組件會以一個真實元素呈現，在頁面中默認渲染成<span>標簽，可以通過tag屬性來修改，如<transition-group tag="div">渲染出來就是div標簽，

注意：串列的每一項都需要進行過渡，串列在回圈時要給每一個串列項添加唯一的key屬性值，這樣串列才會有過渡效果，在進行串列過渡時，過渡模式不可用，因為不再互相切換特有的元素，

2.串列的進入和離開過渡

（1）實作步驟：

一個簡單的案例講解串列過渡，通過name屬性自定義CSS類名前綴，來實作進入和離開的過渡效果，
在瀏覽器中打開，查看頁面效果，單擊“隨機插入一個數字”，單擊“隨機移除一個數字”按鈕，效果如下圖所示，

（2）代碼：

 1 <style>
 2     /* 數字圓圈樣式 */
 3     .list-item {
 4       display: inline-block;
 5       margin-right: 10px;
 6       background-color: red;
 7       border-radius: 50%;
 8       width: 25px;
 9       height: 25px;
10       text-align: center;
11       line-height: 25px;
12       color: #fff;
13     }
14     /* 插入或移除元素的程序 */
15     .list-enter-active, .list-leave-active {
16       transition: all 1s;
17     }
18     /* 開始插入或移除結束的位置變化 */
19     .list-enter, .list-leave-to {
20       opacity: 0;
21       transform: translateY(30px);
22     }
23   </style>
24   <script src="vue.js"></script>
25 </head>
26 <body>
27   <div id="app">
28     <button @click="add">隨機插入一個數字</button>
29     <button @click="remove">隨機移除一個數字</button>
30     <transition-group name="list" tag="p">
31       <span v-for="item in items" :key="item" class="list-item">
32         {{item}}
33       </span>
34     </transition-group>
35   </div>
36   <script>
37     var vm = new Vue({
38       el: '#app',
39       data: {
40         items: [1, 2, 3, 4, 5],     // 定義數字陣列
41         nextNum: 6                        // 下一個數字從6開始
42       },
43       methods: {
44         randomIndex () {
45           return Math.floor(Math.random() * this.items.length)
46         },
47         add () {           // 單擊“隨機插入一個數字”時觸發
48           this.items.splice(this.randomIndex(), 0, this.nextNum++)
49         },
50         remove () {         // 單擊“隨機移除一個數字”時觸發
51           this.items.splice(this.randomIndex(), 1)
52         }
53       }
54     })
55   </script>

（3）效果展示：

3.串列的排序過渡

為了實作串列平滑過渡，可以借助v-move特性，v-move 對于設定過渡的切換時機和過渡曲線非常有用，v-move特性會在元素改變定位的程序中應用，它同之前的類名一樣，可以通過name屬性來自定義前綴（例如name=“list”，則對應的類名就是list-move），當然也可以通過move-class屬性手動設定自定義類名，

Vue使用了FLIP簡單影片佇列來實作排序過渡，所以即使沒有插入或者移除元素，對于元素順序的變化也支持過渡影片，FLIP影片能提高影片的流暢度，可以解決影片的卡頓、閃爍等不流暢的現象，它不僅可以實作單列過渡，也可以實作多維網格的過渡，FLIP代表First、Last、Invert、Play，有興趣的讀者可以自行研究學習，

（1）實作步驟：

修改上述案例中的CSS部分，借助v-move和定位實作元素平滑過渡到新位置的效果，
下載并引入lodash.min.js檔案：首先從官方網站獲取lodash.min.js檔案，保存到檔案目錄中，其次創建html檔案，并在檔案中引入lodash.min.js檔案
撰寫HTML結構代碼
撰寫css樣式代碼
撰寫js邏輯代碼

（2）代碼：

 1  <style>
 2     .list-item {
 3       display: inline-block;
 4       margin-right: 10px;
 5       background-color: red;
 6       border-radius: 50%;
 7       width: 25px;
 8       height: 25px;
 9       text-align: center;
10       line-height: 25px;
11       color: #fff;
12     }
13     /* 元素定位改變時影片 */
14     .list-move {
15       transition: transform 1s;
16     }
17   </style>
18   <script src="lodash.js"></script>
19   <script src="vue.js"></script>
20 </head>
21 <body>
22   <div id="app">
23     <button @click="shuffle">洗牌</button>
24     <transition-group name="list" tag="p">
25       <span v-for="item in items" :key="item" class="list-item">
26         {{ item }}
27       </span>
28     </transition-group>
29   </div>
30   <script>
31     var vm = new Vue({
32       el: '#app',
33       data () {
34         return { items: [1, 2, 3, 4, 5] }
35       },
36       methods: {
37         shuffle () {
38           // shuffle()函式把陣列中的元素按隨機順序重新排列
39           this.items = _.shuffle(this.items)
40         }
41       }
42     })
43   </script>

（3）效果展示：

4.串列的交錯過渡

在Vue中可以實作串列的交錯過渡效果，它是通過data屬性與JavaScript通信來實作的，接下來我們通過案例來講解如何使用鉤子函式結合Velocity.js庫實作搜索功能，根據關鍵字來篩選出符合要求的串列資料，并添加過渡效果，

（1）實作步驟：

下載并引入velocity.min.js檔案：首先從官方網站獲取velocity.min.js檔案，保存到檔案目錄中，其次創建html檔案，并在檔案中引入velocity.min.js檔案
撰寫HTML結構代碼
撰寫js邏輯代碼
在瀏覽器預覽效果
搜索關鍵字“張”進行查找結果如下圖所示

（2）代碼：

 1 <div id="app">
 2     <input placeholder="請輸入要查找的內容" v-model="query">
 3     <transition-group name="item" tag="ul" @before-enter="beforeEnter"
 4      @enter="enter" @leave="leave" v-bind:css="false">
 5       <li v-for="(item, index) in ComputedList" :key="item.msg"
 6        :data-index="index">
 7         {{ item.msg }}
 8       </li>
 9     </transition-group>
10   </div>
11   <script>
12     var vm = new Vue({
13       el: '#app',
14       data () {
15         return {
16           query: '',    // v-model系結的值
17           items: [
18             { msg: '張三' },
19             { msg: '李四' },
20             { msg: '張芳芳' },
21             { msg: '王琳琳' },
22             { msg: '馮圓' }
23           ]
24         }
25       },
26       computed: {                     // 計算屬性
27         ComputedList () {
28           var vm = this.query              // 獲取到input輸入框中的內容
29           var nameList = this.items      // 陣列
30           return nameList.filter(function (item) {
31             return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
32           })
33         }
34       },
35       methods: {
36         beforeEnter (el) {
37           el.style.opacity = 0
38           el.style.height = 0
39         },
40         enter (el, done) {
41           var delay = el.dataset.index * 150
42           setTimeout(function () {
43             Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
44           }, delay)
45         },
46         leave (el, done) {
47           var delay = el.dataset.index * 150
48           setTimeout(function () {
49             Velocity(el, { opacity: 0, height: 0 }, { complete: done })
50           }, delay)
51         }
52       }
53     })
54   </script>

（3）效果展示：

5.可復用的過渡

在Vue中，過渡代碼可以通過組件實作復用，若要創建一個可復用的過渡組件，需要將transition或者transition-group作為組件模板結構，然后在其內部通過插槽的方式撰寫串列結構即可，下面我們就來講解兩種實作過渡的封裝的方式，

（1）實作步驟：

template方式，實作串列可復用的過渡
瀏覽器預覽效果如下圖所示

函式式組件：是一種無狀態（沒有回應式資料）、無實體（沒有this背景關系）的組件，
函式式組件只是一個函式，渲染開銷很低，

（2）代碼：

template方式

 1  <div id="app">
 2     <input placeholder="請輸入要查找的內容" v-model="query">
 3     <fade :query="query" :items="items">
 4       <li v-for="(item, index) in ComputedList"
 5        :key="item.msg" :data-index="index">
 6         {{ item.msg }}
 7       </li>
 8     </fade>
 9   </div>
10 
11   <template id="temp">
12     <transition-group name="item" tag="ul" @before-enter="beforeEnter"
13      @enter="enter" @leave="leave" :css="false">
14       <slot></slot>
15     </transition-group>
16   </template>
17   
18   <script>
19     Vue.component('fade', {            // 定義組件名為fade
20       props: ['query', 'items'],    // 組件實體的屬性
21       template: '#temp', 
22       methods: {
23         beforeEnter (el) {
24           el.style.opacity = 0
25           el.style.height = 0
26         },
27         enter (el, done) {
28           var delay = el.dataset.index * 150
29           setTimeout(function () {
30             Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
31           }, delay)
32         },
33         leave (el, done) {
34           var delay = el.dataset.index * 150
35           setTimeout(function () {
36             Velocity(el, {opacity: 0, height: 0}, {complete: done})
37           }, delay)
38         }
39       }
40     })
41     var vm = new Vue({
42       el: '#app',
43       data: {
44         query: '',
45         items: [
46           { msg: '張三' },
47           { msg: '李四' },
48           { msg: '張芳芳' },
49           { msg: '王琳琳' },
50           { msg: '馮圓' }
51         ]
52       },
53       computed: {     // 計算屬性
54         ComputedList () {
55           var vm = this.query
56           var nameList = this.items
57           return nameList.filter(function (item) {
58             return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
59           })
60         }
61       }
62     })
63   </script>

函式式組件方式

 1 <div id="app">
 2     <input placeholder="請輸入要查找的內容" v-model="query">
 3     <fade :query="query" :items="items">
 4       <li v-for="(item, index) in ComputedList" :key="item.msg"
 5        :data-index="index">
 6         {{ item.msg }}
 7       </li>
 8     </fade>
 9   </div>  
10   
11   <script>
12     Vue.component('fade', {
13       functional: true,      // 標記fade組件為函式式組件 
14       props: ['query', 'items'],
15       render (h, ctx) {
16         var data = {
17           props: {              // props組件
18             tag: 'ul',        // 修改默認渲染的span標簽為ul
19             css: false
20           },
21           on: {
22             beforeEnter (el) {
23               el.style.opacity = 0
24               el.style.height = 0
25             },
26             enter (el, done) {
27               var delay = el.dataset.index * 150
28               setTimeout(function () {
29                 Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
30               }, delay)
31             },
32             leave (el, done) {
33               var delay = el.dataset.index * 150
34               setTimeout(function () {
35                 Velocity(el, { opacity: 0, height: 0 }, { complete: done })
36               }, delay)
37             }
38           }
39         }
40         // data是傳遞給組件的資料物件，作為createElement()的第2個引數傳入組件
41         // ctx.children是VNode子節點的陣列
42         return h('transition-group', data,ctx.children)
43       }
44     })
45     var vm = new Vue({
46       el: '#app',
47       data: {
48         query: '',
49         items: [
50           { msg: '張三' },
51           { msg: '李四' },
52           { msg: '張芳芳' },
53           { msg: '王琳琳' },
54           { msg: '馮圓' }
55         ]
56       },
57       computed: {
58         ComputedList () {
59           var vm = this.query
60           var nameList = this.items 
61           return nameList.filter(function (item) {
62             return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
63           })
64         }
65       }
66     })
67   </script>

注意：

在Vue 2.3.0版本及以下，如果一個函式式組件想要接收props，則必須有props選項；但是在2.3.0以上版本中，可以省略props選項，所有組件上的特性會被自動決議為props，

（3）效果展示：

總結：

以上便是本篇文章所寫的關于如何使用Vue的過渡和影片來實作想要的效果
內容包括transition組件的使用、內置的CSS類名、自定義類名、配合第三方CSS影片庫animate.css實作過渡影片、在過渡鉤子函式中使用JavaScript進行操作
以及配合第三方JavaScript影片庫Velocity.js實作過渡影片，

通過以上的學習，各位筆友應該能夠使用Vue完成一些簡單的頁面過渡效果和影片效果的展示，

碼字不易，認為樓主寫的還不錯，對你有幫助的話，請給個三連（關注、點贊、收藏）另外有問題可評論區留言討論，

后期會完善Vue進階語法的相關知識，有幫助的話，敬請關注樓主 持續更新中ing ，，，（不定時發文）

轉載時請注明出處鏈接

百度云盤案列全套原始碼獲取鏈接（地址如下）：

 鏈接：https://pan.baidu.com/s/1_OhACAdsee2AiBOW7JrPbw?pwd=1234
提取碼：1234

參考檔案：

1.vue官方檔案：Vue.js (vuejs.org)

2.傳智播客-黑馬程式員（教材）：http://stu.ityxb.com/

其他隨筆推薦：

1. 十大排序演算法（Java實作）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

2. Vue開發環境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html

3. Vue基礎入門一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html

4. Vue基礎入門二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html

5. Vue基礎知識思維導圖：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html

本文來自博客園，作者：智博程式園，轉載請注明原文鏈接，謝謝配合：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464082.html

標籤：其他

上一篇：二次封裝這幾個 element-ui 組件后，讓代碼更加優雅了

下一篇：async和await的實作原理

Vue過渡和影片效果展示（案例、GIF動圖演示、附原始碼）

前言

案例實作模版：

一、Vue過渡和影片基礎

1.什么是過渡和影片

（1）代碼：

（2）效果展示：

2.transition組件

3.自定義類名

（1）實作步驟：

（2）代碼：

（3）效果展示：

（3）效果展示：

4.使用@keyframes創建CSS影片

（1）實作步驟：

（2）代碼：

（3）效果展示：

5.鉤子函式實作影片

（1）實作步驟：

（2）代碼：

6.Vue結合Velocity.js實作影片

（1）實作步驟：

（2）示例代碼：

（3）效果展示：

二、多個元素過渡

1.不同標簽名元素過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

2.相同標簽名元素過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

（3）效果展示：

3.過渡模式

（1）實作步驟：

（2）代碼：

（3）效果展示：

三、多個組件過渡

1.什么是多個組件過渡

2.案例演示

（1）實作步驟：

（2）代碼：

（3）效果展示：

四、串列過渡

1.什么是串列過渡

2.串列的進入和離開過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

3.串列的排序過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

4.串列的交錯過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

5.可復用的過渡

（1）實作步驟：

（2）代碼：

（3）效果展示：

總結：

參考檔案：

其他隨筆推薦：