Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

博客 动态
0 212
羽尘
羽尘 2022-04-25 21:58:26
悬赏:0 积分 收藏

Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

Vue过渡和动画效果展示(案例、GIF动图演示、附源码) 本篇文章主要写了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.html16     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                      // 透明度为017           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的值为A26     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()) !== -132           })33         }34       },35       methods: {36         beforeEnter (el) {37           el.style.opacity = 038           el.style.height = 039         },40         enter (el, done) {41           var delay = el.dataset.index * 15042           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 * 15048           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', {            // 定义组件名为fade20       props: ['query', 'items'],    // 组件实例的属性21       template: '#temp', 22       methods: {23         beforeEnter (el) {24           el.style.opacity = 025           el.style.height = 026         },27         enter (el, done) {28           var delay = el.dataset.index * 15029           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 * 15035           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.query56           var nameList = this.items57           return nameList.filter(function (item) {58             return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -159           })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标签为ul19             css: false20           },21           on: {22             beforeEnter (el) {23               el.style.opacity = 024               el.style.height = 025             },26             enter (el, done) {27               var delay = el.dataset.index * 15028               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 * 15034               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.query60           var nameList = this.items 61           return nameList.filter(function (item) {62             return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -163           })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 智博程序园 阅读(1) 评论(0) 编辑 收藏 举报
回帖
    羽尘

    羽尘 (王者 段位)

    2335 积分 (2)粉丝 (11)源码

     

    温馨提示

    亦奇源码

    最新会员