本文引入类库的方式均采用CND的方式，可直接复制代码到编辑器中学习和测试
-
不使用动画切换元素
1 <div id="app"> 2 <input type="button" value="toggle" @click="flag=!flag"> 3 4 <h3 v-if="flag">这是一个H3h3> 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>Documenttitle>
<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"> <transition> <h3 v-if="flag">这是一个H3h3> 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>Documenttitle>
9 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 42 43 44 <transition> 45 <h3 v-if="flag">这是一个H3h3> 46 transition> 47 <hr> 48 <input type="button" value="toggle2" @click="flag2=!flag2"> 49 <transition name="my"> 50 <h6 v-if="flag2">这是一个H6h6> 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>Documenttitle> 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 12 head> 13 14 <body> 15 <div id="app"> 16 <input type="button" value="toggle" @click="flag=!flag"> 17 18 <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> 19 <h3 v-if="flag" class="animated">这是一个H3h3> 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>Documenttitle>
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 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>Documenttitle> 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 54 55 56 57 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 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>