本文引入类库的方式均采用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: false12 },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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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实例，得到ViewModel55 var vm = new Vue({56 el: '#app',57 data: {58 flag: false,59 flag2: false60 },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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/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实例，得到ViewModel25 var vm = new Vue({26 el: '#app',27 data: {28 flag: false29 },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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 实例，得到 ViewModel30 var vm = new Vue({31 el: '#app',32 data: {33 flag: false34 },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.offsetWidth47 // 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 // 动画完成之后，会调用afterEnter56 // console.log('ok')57 this.flag = !this.flag58 }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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 实例，得到 ViewModel67 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>
原文出处：https://www.cnblogs.com/netlws/p/9499309.html
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦