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


前言

本篇随笔主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。

作为自己对Vue过渡和动画效果知识的总结与笔记。

因内容有案例解读,代码实现,导致篇幅稍长,大约3分钟可以浏览完,如有需要的话(请笔友耐心看完,也可按目录查找所需内容)

如需要全部案例代码:请到文章末尾获取(百度网盘链接,全套案例源码

 

案例实现模版:

PS: 点击模版后的 -->  Vue过渡和动画效果展示(案例、GIF动图演示、附源码) 这个标志可以浏览目录结构,以便快速定位需要的内容

以下案例均是基于此模版实现的(以第一个案例为例)

效果展示:

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

 

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

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

2.transition组件

Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类,

过渡类型

说明

v-enter

进入过渡的开始状态,作用于开始的一帧

v-enter-active

进入过渡生效时的状态,作用于整个过程

v-enter-to

进入过渡的结束状态,作用于结束的一帧

v-leave

离开过渡的开始状态,作用于开始的一帧

v-leave-active

离开过渡生效时的状态,作用于整个过程

v-leave-to

离开过渡的结束状态,作用于结束的一帧

上表中6个CSS类名在进入和离开的过渡中切换的存在周期如下图所示:

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

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

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

改:

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

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

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

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

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

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

二、多个元素过渡

1.不同标