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属性，它的两个值如下所示。
- 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
Vue过渡和动画效果展示（案例、GIF动图演示、附源码）的更多相关文章
- Vue路由实现之通过URL中的hash（#号）来实现不同页面之间的切换（图表展示、案例分析、附源码详解）
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 精选9个值得学习的 HTML5 效果【附源码】
这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
随机推荐
- java并发lock锁详解和使用
一.synchronized的缺陷 synchronized是java中的一个关键字,也就是说是Java语言内置的特性.那么为什么会出现Lock呢? 在上面一篇文章中,我们了解到如果一个代码块被syn ...
- Java Arrays.asList(0,1,2,3,4,5,6,7,8,9).parallelStream().forEach 进行循环获取HttpServletRequest的为Null的解决方案
Arrays.asList(0,1,2,3,4,5,6,7,8,9).parallelStream().forEach() parallelStream是并行执行流的每个元素,也就是多线程执行,这样就 ...
- [邮件服务]Foxmail安装及配置指引（Windows）
操作指引: Step1:访问Foxmail邮箱官网:https://www.foxmail.com/,选择"Windows"版,点击"立即下载". Step2: ...
- 面试问题之C++语言：C与C++的区别
C是C++的基础,C++语言和C语言在很多方面是兼容的. C是结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出或实现过程(事务 ...
- 为什么需要域驱动设计DDD？
我们需要 DDD 的因素 – 微服务面试问题
- C语言之数据类型(知识点8)
一.数据类型 1.数据基本类型 (1)整数 ①有符号整形 有符号短整型 short 有符号基本整形 int 有符号长整形 long ②无符号整形 无符号基本整形 无符号短整型 无符号长整型 (2) ...
- idea问题之"一个或多个listeners启动失败问题"
org.apache.catalina.core.StandardContext.startInternal 一个或多个listeners启动失败,更多详细信息查看对应的容器日志文件之 "A ...
- 002.MEMS应用在开关电源上，实现大功率超小型化
设计任务书 1.有关MEMS还有待具体了解 2.有关开关电源的目前难题也需要了解
- 如何形成一个完整的HTML对象
写在前面,本文将同步发布于Blog.掘金.segmentfault.知乎等处,如果本文对你有帮助,记得为我得到我的个人技术博客项目给个star哦. 为何写这篇文章? 你可能做Web开发已经有一段时间, ...
- uniapp打包成H5部署到服务器教程
当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了. 在网上看了一圈,好像没有找到十分详细的教程,这里 ...