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 。。。（不定时发文）

转载时请注明出处链接

百度云盘案列全套源码获取链接（地址如下）：

 链接：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

 

 

 
 
 
posted @ 2022-04-25 20:01  智博程序园  阅读(3572)  评论(0)  编辑  收藏  举报