本文引入类库的方式均采用CND的方式，可直接复制代码到编辑器中学习和测试
- 不使用动画切换元素
1 <div id="app"> 2 <input type="button" value="toggle" @click="flag=!flag"> 3 <!-- 需求：点击按钮，让h3显示，再点击让h3隐藏 --> 4 <h3 v-if="flag">这是一个H3</h3> 5 </div> 6 <script> 7 // 创建Vue实例，得到ViewModel 8 var vm = new Vue({ 9 el: '#app', 10 data: { 11 flag: false 12 }, 13 methods: {} 14 }); 15 </script>
- 使用过渡类名实现动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 --> <style> /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了 */ .v-enter,.v-leave-to { opacity: 0; transform: translateX(150px); } /* v-enter-active 【入场动画的时间段】 v-leave-active 【离场动画的时间段】 */ .v-enter-active,.v-leave-active { transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求： 点击按钮，让h3显示，再点击，让h3隐藏 --> <!-- 1. 使用 transition元素，把需要被动画控制的元素包裹起来 --> <!-- transition元素，是Vue官方提供的 --> <transition> <h3 v-if="flag">这是一个H3</h3> </transition> </div> <script> // 创建Vue实例，得到ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: {} }); </script> </body> </html>
- 修改“v-”前缀用上面一种方式实现多个动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9 <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 --> 10 <style> 11 /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 12 v-leave-to【这是一个时间点】 是动画离开之后，离开的终止状态，此时元素动画已经结束了 */ 13 .v-enter, 14 .v-leave-to { 15 opacity: 0; 16 transform: translateX(150px); 17 } 18 /* v-enter-active 【入场动画的时间段】 19 v-leave-active 【离场动画的时间段】 */ 20 .v-enter-active, 21 .v-leave-active { 22 transition: all 0.8s ease; 23 } 24 25 .my-enter, 26 .my-leave-to { 27 opacity: 0; 28 transform: translateY(70px); 29 } 30 31 .my-enter-active, 32 .my-leave-active { 33 transition: all 0.8s ease; 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="app"> 40 <input type="button" value="toggle" @click="flag=!flag"> 41 <!-- 需求： 点击按钮，让h3显示，再点击，让h3隐藏 --> 42 <!-- 1. 使用transition元素，把需要被动画控制的元素，包裹起来 --> 43 <!-- transition元素，是Vue官方提供的 --> 44 <transition> 45 <h3 v-if="flag">这是一个H3</h3> 46 </transition> 47 <hr> 48 <input type="button" value="toggle2" @click="flag2=!flag2"> 49 <transition name="my"> 50 <h6 v-if="flag2">这是一个H6</h6> 51 </transition> 52 </div> 53 <script> 54 // 创建Vue实例，得到ViewModel 55 var vm = new Vue({ 56 el: '#app', 57 data: { 58 flag: false, 59 flag2: false 60 }, 61 methods: {} 62 }); 63 </script> 64 </body> 65 66 </html>
- 使用第三方类库来实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css"> 11 <!-- 入场 bounceIn 离场 bounceOut --> 12 </head> 13 14 <body> 15 <div id="app"> 16 <input type="button" value="toggle" @click="flag=!flag"> 17 <!-- 使用 :duration="{ enter: 200, leave: 400 }" 来分别设置入场的时长和离场的时长 --> 18 <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> 19 <h3 v-if="flag" class="animated">这是一个H3</h3> 20 </transition> 21 </div> 22 23 <script> 24 // 创建Vue实例，得到ViewModel 25 var vm = new Vue({ 26 el: '#app', 27 data: { 28 flag: false 29 }, 30 methods: {} 31 }); 32 </script> 33 </body> 34 35 </html>
- 使用钩子函数模拟-动画的生命周期函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9 <style> 10 .ball { 11 width: 15px; 12 height: 15px; 13 border-radius: 50%; 14 background-color: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="app"> 20 <input type="button" value="快到碗里来" @click="flag=!flag"> 21 <!-- 1. 使用 transition 元素把 小球包裹起来 --> 22 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> 23 <div class="ball" v-show="flag"></div> 24 </transition> 25 </div> 26 27 <script> 28 29 // 创建 Vue 实例，得到 ViewModel 30 var vm = new Vue({ 31 el: '#app', 32 data: { 33 flag: false 34 }, 35 methods: { 36 // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象 37 // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象 38 beforeEnter(el) { 39 // beforeEnter 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式 40 // 设置小球开始动画之前的起始位置 41 el.style.transform = "translate(0, 0)" 42 }, 43 enter(el, done) { 44 // 这句话没有实际的作用，但是，如果不写，出不来动画效果； 45 // 可以认为 el.offsetWidth 会强制动画刷新 46 el.offsetWidth 47 // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态 48 el.style.transform = "translate(150px, 450px)" 49 el.style.transition = 'all 1s ease' 50 51 // 这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用 52 done() 53 }, 54 afterEnter(el) { 55 // 动画完成之后，会调用afterEnter 56 // console.log('ok') 57 this.flag = !this.flag 58 } 59 } 60 }); 61 </script> 62 </body> 63 64 </html>
- 动画列表
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <style> 11 li { 12 margin: 5px; 13 line-height: 35px; 14 padding-left: 5px; 15 font-size: 12px; 16 width: 100%; 17 } 18 li:hover { 19 background-color: hotpink; 20 transition: all 0.8s ease; 21 } 22 .v-enter, 23 .v-leave-to { 24 opacity: 0; 25 transform: translateY(80px); 26 } 27 .v-enter-active, 28 .v-leave-active { 29 transition: all 0.6s ease; 30 } 31 /* 下面的 .v-move 和 .v-leave-active配合使用，能够实现列表后续的元素渐渐地漂上来的效果 */ 32 .v-move { 33 transition: all 0.6s ease; 34 } 35 .v-leave-active { 36 position: absolute; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="app"> 42 <div> 43 <label> 44 Id: 45 <input type="text" v-model="id"> 46 </label> 47 <label> 48 Name: 49 <input type="text" v-model="name"> 50 </label> 51 <input type="button" value="添加" @click="add"> 52 </div> 53 <!-- <ul> --> 54 <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --> 55 <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --> 56 <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --> 57 <!-- 通过 为 transition-group 元素，设置 tag 属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签 --> 58 <transition-group appear tag="ul"> 59 <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> 60 {{item.id}} --- {{item.name}} 61 </li> 62 </transition-group> 63 <!-- </ul> --> 64 </div> 65 <script> 66 // 创建 Vue 实例，得到 ViewModel 67 var vm = new Vue({ 68 el: '#app', 69 data: { 70 id: '', 71 name: '', 72 list: [ 73 { id: 1, name: 'java' }, 74 { id: 2, name: 'C#' }, 75 { id: 3, name: 'php' }, 76 { id: 4, name: 'javascript' } 77 ] 78 }, 79 methods: { 80 add() { 81 this.list.push({ id: this.id, name: this.name }) 82 this.id = this.name = '' 83 }, 84 del(i) { 85 this.list.splice(i, 1) 86 } 87 } 88 }); 89 </script> 90 </body> 91 </html>