Vue过渡和动画效果展示（案例、GIF动图演示、附源码） |
您所在的位置：网站首页 › vue相册展示 › Vue过渡和动画效果展示（案例、GIF动图演示、附源码） |
Vue过渡和动画效果展示（案例、GIF动图演示、附源码）
本篇文章主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。
前言
本篇随笔主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。 作为自己对Vue过渡和动画效果知识的总结与笔记。 因内容有案例解读，代码实现，导致篇幅稍长，大约3分钟可以浏览完，如有需要的话（请笔友耐心看完，也可按目录查找所需内容） 如需要全部案例代码：请到文章末尾获取（百度网盘链接，全套案例源码） 案例实现模版： PS: 点击模版后的 --> 以下案例均是基于此模版实现的（以第一个案例为例） 效果展示：
1 DOCTYPE html> 2 3 4 5 6 7 8 Document 9 10 11 12 13 14 15 16 17 18 19 20 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 47 48 49 50 51 52 53 改变图形宽度 54 55 56 57 58 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 71 72 73 74 一、Vue过渡和动画基础 1.什么是过渡和动画 过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。 通过标签搭配CSS动画（如@keyframes）可以实现动画效果。动画相比过渡来说，动画可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个关键帧，然后在动画50%的位置设置一个完全不同的状态。另外，标签还提供了一些钩子函数，可以结合JavaScript代码来完成动画效果。 （1）代码： 1 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 21 22 23 24 25 改变图形宽度 26 27 28 29 30 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 （2）效果展示：
Vue为标签内部的元素提供了3个进入过渡的类和3个离开过渡的类， 过渡类型 说明 v-enter 进入过渡的开始状态，作用于开始的一帧 v-enter-active 进入过渡生效时的状态，作用于整个过程 v-enter-to 进入过渡的结束状态，作用于结束的一帧 v-leave 离开过渡的开始状态，作用于开始的一帧 v-leave-active 离开过渡生效时的状态，作用于整个过程 v-leave-to 离开过渡的结束状态，作用于结束的一帧 上表中6个CSS类名在进入和离开的过渡中切换的存在周期如下图所示：
Vue中的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 2 显示/隐藏 3 5 过渡文字效果 6 7 8 9 var vm = new Vue({ 10 el: '#app', 11 data: { show: true } 12 }) 13注意： 动画效果都是在事件处理方法中控制的，在元素初始渲染时（页面刚打开时）并没有动画效果。可以通过给transition组件设置appear属性来给元素添加初始渲染的动画效果。 （3）效果展示：
改： 1 2 显示/隐藏 3 6 过渡文字效果 7 8 9 10 var vm = new Vue({ el: '#app', data: { show: true } }) 11上述代码中，appear表示开启此特性，appear-class表示初始class样式，appear-to-class表示过渡完成的class样式，appear-active-class会应用在整个过渡过程中。 （3）效果展示：
@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。 （2）代码： 1 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 25 26 27 28 29 使用@keyframes创建CSS动画 30 31 圆形 32 33 34 35 var vm = new Vue({ el: '#app', data: { show: true } }) 36 （3）效果展示：
在标签中定义了一些动画钩子函数，用来实现动画。钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。 （2）代码： 1 2 12 13 14 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 6.Vue结合Velocity.js实现动画 （1）实现步骤： 下载并引入velocity.min.js文件首先从官方网站获取velocity.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入velocity.min.js文件 编写HTML结构代码beforeEnter和enter两个入场动画函数，leave是出场动画函数 编写JavaScript代码 （2）示例代码： 1 2 动画效果 3 5 文字动画效果 6 7 8 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 （3）效果展示：
不相同标签名元素可以使用v-if和v-else来进行过渡 （2）代码： 1 2 3 4 项目1 5 6 7 抱歉，没有找到您查找的内容。 8 9 10 11 var vm = new Vue({ el: '#app', data: { items: [] } }) 12 （3）效果展示：
当有相同标签名的元素切换时，需要通过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 2 切换保存和编辑按钮 3 4 5 保存 6 编辑 7 8 9 10 11 var vm = new Vue({ 12 el: '#app', 13 data: { isEditing: true } 14 }) 15案例二：同一个元素的key属性设置不同的状态来代替v-if和v-else 1 2 切换保存和编辑按钮 3 4 5 6 {{isEditing ? '保存' : '编辑'}} 7 8 9 10 11 12 var vm = new Vue({ el: '#app', data: { isEditing: true } }) 13 （3）效果展示：
案例三：使用多个v-if结合key属性来实现相同标签名的过渡效果 1 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 9 10 11 12 13 切换 14 15 16 17 18 19 20 21 22 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 （3）效果展示：
新旧两个元素参与过渡的时候，新元素的进入和旧元素的离开会同时触发，这是因为的默认行为进入和离开同时发生了。如果要求离开的元素完全消失后，进入的元素再显示出来（如开关的切换），可以使用transition提供的过渡模式mode，来解决当一个组件离开后，另一个组件进来时发生的位置的闪动或阻塞问题。 （1）实现步骤：过渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。 in-out ：表示新元素先进行过渡，完成之后当前元素过渡离开 out-in：表示当前元素先进行过渡，完成之后新元素过渡进入使用out-in实现开关的切换过渡效果。 （2）代码： 1 2 .fade-enter, .fade-leave-to { opacity: 0; } 3 .fade-enter-active, .fade-leave-active { transition: opacity .5s; } 4 5 6 7 8 9 10 {{isOff ? 'Off' : 'On'}} 11 12 13 14 var vm = new Vue({ el: '#app', data: { isOff: false } }) 15 （3）效果展示：
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。 2.案例演示 （1）实现步骤： 定义登录组件 编写CSS代码 编写JS代码 （2）代码： 1 2 .fade-enter-active, .fade-leave-active { 3 transition: opacity .5s ease; 4 } 5 .fade-enter, .fade-leave-to { 6 opacity: 0; 7 } 8 9 10 11 12 13 14 我是登录组件 15 16 17 18 我是注册组件 19 20 21 登录 22 注册 23 24 25 26 27 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 （3）效果展示：
四、列表过渡
1.什么是列表过渡
列表过渡，需要使用v-for和transition-group组件来实现。 transition-group组件会以一个真实元素呈现，在页面中默认渲染成标签，可以通过tag属性来修改，如渲染出来就是div标签。 注意：列表的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。 2.列表的进入和离开过渡 （1）实现步骤： 一个简单的案例讲解列表过渡，通过name属性自定义CSS类名前缀，来实现进入和离开的过渡效果。 在浏览器中打开，查看页面效果。单击“随机插入一个数字”，单击“随机移除一个数字”按钮，效果如下图所示。 （2）代码： 1 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 24 25 26 27 28 随机插入一个数字 29 随机移除一个数字 30 31 32 {{item}} 33 34 35 36 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 （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 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 18 19 20 21 22 23 洗牌 24 25 26 {{ item }} 27 28 29 30 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 （3）效果展示：
在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。接下来我们通过案例来讲解如何使用钩子函数结合Velocity.js库实现搜索功能，根据关键字来筛选出符合要求的列表数据，并添加过渡效果。 （1）实现步骤： 下载并引入velocity.min.js文件：首先从官方网站获取velocity.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入velocity.min.js文件 编写HTML结构代码 编写js逻辑代码 在浏览器预览效果 搜索关键字“张”进行查找结果如下图所示 （2）代码： 1 2 3 5 7 {{ item.msg }} 8 9 10 11 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 （3）效果展示：
在Vue中，过渡代码可以通过组件实现复用。若要创建一个可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，然后在其内部通过插槽的方式编写列表结构即可。下面我们就来讲解两种实现过渡的封装的方式。 （1）实现步骤： template方式，实现列表可复用的过渡 浏览器预览效果如下图所示 函数式组件：是一种无状态（没有响应式数据）、无实例（没有this上下文）的组件。 函数式组件只是一个函数，渲染开销很低。 （2）代码：template方式 1 2 3 4 6 {{ item.msg }} 7 8 9 10 11 12 14 15 16 17 18 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函数式组件方式 1 2 3 4 6 {{ item.msg }} 7 8 9 10 11 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注意： 在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
本文来自博客园，作者：智博程序园，转载请注明原文链接，谢谢配合：https://www.cnblogs.com/zbcxy506/p/note_1vue-05.html |
这个标志可以浏览目录结构，以便快速定位需要的内容
【本文地址】