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="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屬性,它的兩個值如下所示。

  1. in-out :表示新元素先進行過渡,完成之後當前元素過渡離開
  2. 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方式,實現列表可復用的過渡
  • 瀏覽器預覽效果如下圖所示
  1. 函數式組件:是一種無狀態(沒有響應式數據)、無實例(沒有this上下文)的組件。
  2. 函數式組件只是一個函數,渲染開銷很低。

(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)效果展示:

 

總結:

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

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

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

後期會完善Vue進階語法的相關知識,有幫助的話,敬請關注樓主 持續更新中ing 。。。(不定時發文)

轉載時請註明出處鏈接

百度雲盤案列全套源碼獲取鏈接(地址如下):

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

 

參考文檔:

 1.vue官方文檔:Vue.js (vuejs.org)

 2.傳智Podcast-黑馬程式設計師(教材)://stu.ityxb.com/


 

其他隨筆推薦:

1. 十大排序演算法(Java實現)(作者力推)://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html

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

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

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

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