Vue.js中的动画
2024-06-17 23:00:07
Vue中的动画
为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；
使用过渡类名
- HTML结构：
<div id="app"><input type="button" value="动起来" @click="myAnimate"><!-- 使用 transition 将需要过渡的元素包裹起来 --><transition name="fade"><div v-show="isshow">动画哦</div></transition></div>
- VM 实例：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({el: '#app',data: {isshow: false},methods: {myAnimate() {this.isshow = !this.isshow;}}
});
- 定义两组类样式：
/* 定义进入和离开时候的过渡状态 */.fade-enter-active,.fade-leave-active {transition: all 0.2s ease;position: absolute;}/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */.fade-enter,.fade-leave-to {opacity: 0;transform: translateX(100px);}
代码：
<!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="./lib/vue-2.4.0.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 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {}});</script>
</body></html>
修改v-前缀
<!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="./lib/vue-2.4.0.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;}.my-enter,.my-leave-to {opacity: 0;transform: translateY(70px);}.my-enter-active,.my-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><hr><input type="button" value="toggle2" @click="flag2=!flag2"><transition name="my"><h6 v-if="flag2">这是一个H6</h6></transition></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false,flag2: false},methods: {}});</script>
</body></html>
使用transition name="my"来替换v-前缀
使用第三方 CSS 动画库
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
<transitionenter-active-class="fadeInRight"leave-active-class="fadeOutRight":duration="{ enter: 500, leave: 800 }"><div class="animated" v-show="isshow">动画哦</div>
</transition>
<!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="./lib/vue-2.4.0.js"></script><link rel="stylesheet" href="./lib/animate.css"><!-- 入场 bounceIn 离场 bounceOut -->
</head><body><div id="app"><input type="button" value="toggle" @click="flag=!flag"><!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --><!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"><h3 v-if="flag">这是一个H3</h3></transition> --><!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 --><!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200"><h3 v-if="flag" class="animated">这是一个H3</h3></transition> --><!-- 使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长 --><transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"><h3 v-if="flag" class="animated">这是一个H3</h3></transition> </div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {}});</script>
</body></html>
使用动画钩子函数
- 定义 transition 组件以及三个钩子函数：
<div id="app"><input type="button" value="切换动画" @click="isshow = !isshow"><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"><div v-if="isshow" class="show">OK</div></transition></div>
- 定义三个 methods 钩子方法：
methods: {beforeEnter(el) { // 动画进入之前的回调el.style.transform = 'translateX(500px)';},enter(el, done) { // 动画进入完成时候的回调el.offsetWidth;el.style.transform = 'translateX(0px)';done();},afterEnter(el) { // 动画进入完成之后的回调this.isshow = !this.isshow;}}
- 定义动画过渡时长和样式：
.show{transition: all 0.4s ease;}
使用钩子函数模拟小球半场动画
<!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="./lib/vue-2.4.0.js"></script><style>.ball {width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style>
</head><body><div id="app"><input type="button" value="快到碗里来" @click="flag=!flag"><!-- 1. 使用 transition 元素把 小球包裹起来 --><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"><div class="ball" v-show="flag"></div></transition></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象beforeEnter(el){// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式// 设置小球开始动画之前的，起始位置el.style.transform = "translate(0, 0)"},enter(el, done){// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；// 可以认为 el.offsetWidth 会强制动画刷新el.offsetWidth// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态el.style.transform = "translate(150px, 450px)"el.style.transition = 'all 1s ease'// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用done()},afterEnter(el){// 动画完成之后，会调用 afterEnter// console.log('ok')this.flag = !this.flag}}});</script>
</body></html>
v-for 的列表过渡
<style>.list-enter,.list-leave-to {opacity: 0;transform: translateY(10px);}.list-enter-active,.list-leave-active {transition: all 0.3s ease;}
</style>
<div id="app"><input type="text" v-model="txt" @keyup.enter="add"><transition-group tag="ul" name="list"><li v-for="(item, i) in list" :key="i">{{item}}</li></transition-group></div>
// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {txt: '',list: [1, 2, 3, 4]},methods: {add() {this.list.push(this.txt);this.txt = '';}}});
列表的排序过渡
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。
v-move和v-leave-active结合使用，能够让列表的过渡更加平缓柔和：
.v-move{transition: all 0.8s ease;
}
.v-leave-active{position: absolute;
}
<!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="./lib/vue-2.4.0.js"></script><style>li {border: 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;width: 100%;}li:hover {background-color: hotpink;transition: all 0.8s ease;}.v-enter,.v-leave-to {opacity: 0;transform: translateY(80px);}.v-enter-active,.v-leave-active {transition: all 0.6s ease;}/* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */.v-move {transition: all 0.6s ease;}.v-leave-active{position: absolute;}</style>
</head><body><div id="app"><div><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><!-- <ul> --><!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --><!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --><!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --><!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --><transition-group appear tag="ul"><li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{item.id}} --- {{item.name}}</li></transition-group><!-- </ul> --></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',list: [{ id: 1, name: '赵高' },{ id: 2, name: '秦桧' },{ id: 3, name: '严嵩' },{ id: 4, name: '魏忠贤' }]},methods: {add() {this.list.push({ id: this.id, name: this.name })this.id = this.name = ''},del(i) {this.list.splice(i, 1)}}});</script>
</body></html>
小球动画
实现小球抛物线然后消失。
使用flag来控制小球隐藏
<!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="./lib/vue-2.4.0.js"></script><style>.ball {width: 15px;height: 15px;background-color: red;border-radius: 50%;}</style>
</head><body><div id="app"><input type="button" value="加入购物车" @click="flag=!flag"><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled="enterCancelled"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave"@leave-cancelled="leaveCancelled"><div class="ball" v-show="flag"></div></transition></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {beforeEnter(el){el.style.transform = 'translate(0, 0)'console.log("before:" + this.flag)},enter(el,done){el.offsetWidthel.style.transform = 'translate(150px, 450px)'el.style.transition = 'all 1s ease'console.log("enter:" + this.flag)done()},afterEnter(el){// 这句话， 第一个功能，是控制小球的显示与隐藏// 第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false// 当第二次再点击 按钮的时候， flag false -> truethis.flag = !this.flagconsole.log("afterEnter:" + this.flag)//el.style.opacity = 0.5// Vue 把一个完整的动画，使用钩子函数，拆分为了两部分：// 我们使用 flag 标识符，来表示动画的切换；// 刚以开始，flag = false -> true -> false},enterCancelled: function (el) {// ...console.log("enterCancelled:" + this.flag)},// --------// 离开时// --------beforeLeave: function (el) {// ...console.log("beforeLeave:" + this.flag)},// 当与 CSS 结合使用时// 回调函数 done 是可选的leave: function (el) {// ...console.log("leave:" + this.flag)},afterLeave: function (el) {// ...console.log("afterLeave:" + this.flag)},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...console.log("leaveCancelled:" + this.flag)}}});</script>
</body></html>
使用el.style.opacit来控制小球隐藏，但是这种方法不行：
<!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="./lib/vue-2.4.0.js"></script><style>.ball {width: 15px;height: 15px;background-color: red;border-radius: 50%;}</style>
</head><body><div id="app"><input type="button" value="加入购物车" @click="flag=!flag"><transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled="enterCancelled"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave"@leave-cancelled="leaveCancelled"><div class="ball" v-show="flag"></div></transition></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {flag: false},methods: {beforeEnter(el){el.style.transform = 'translate(0, 0)'console.log("before:" + this.flag)},enter(el,done){el.offsetWidthel.style.transform = 'translate(150px, 450px)'el.style.transition = 'all 1s ease'console.log("enter:" + this.flag)done()},afterEnter(el){// 这句话， 第一个功能，是控制小球的显示与隐藏// 第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false// 当第二次再点击 按钮的时候， flag false -> true//this.flag = !this.flagconsole.log("afterEnter:" + this.flag)el.style.opacity = 0.5// Vue 把一个完整的动画，使用钩子函数，拆分为了两部分：// 我们使用 flag 标识符，来表示动画的切换；// 刚以开始，flag = false -> true -> false},enterCancelled: function (el) {// ...console.log("enterCancelled:" + this.flag)},// --------// 离开时// --------beforeLeave: function (el) {// ...console.log("beforeLeave:" + this.flag)},// 当与 CSS 结合使用时// 回调函数 done 是可选的leave: function (el) {// ...console.log("leave:" + this.flag)},afterLeave: function (el) {// ...console.log("afterLeave:" + this.flag)},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...console.log("leaveCancelled:" + this.flag)}}});</script>
</body></html>
第一次点击的时候：
第二次点击：
所以 this.flag = !this.flag 这句话， 第一个功能，是控制小球的显示与隐藏。第二个功能： 直接跳过后半场动画，让 flag 标识符 直接变为 false
源代码地址
Vue.js中的动画相关推荐
- vue.js中＜Transition＞ 组件
在vue.js中发现 这个过渡动画的组件 简单的可以使用 如果需要复杂的动画效果可以自己引入动画库
- echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了 在 webpack 中使用 EChar ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- vue.js中mock本地json数据
vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言 要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
- ie浏览器查看vue中js_浅析 Vue.js 中那些空间换时间的操作
Hello,各位小伙伴,接下来的一段时间里,我会把我的课程<Vue.js 3.0 核心源码解析>中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定 ...
最新文章
- 黑客用上机器学习你慌不慌？这 7 种窃取数据的新手段快来认识一下！
- 工作第二年，她月薪上万，存款二十万，为什么？
- 年度书单盘点 | “裁员潮”持续蔓延？职场没有铁饭碗，只有硬技能
- 从算法+数据结构到MVC
- Intel Realsense D435 pyrealsense set_option() rs.option 可配置参数翻译
- 【笔记】 感受野与权值共享 摄像头标定 相机坐标与世界坐标
- 漫画 | 公司测试因提Bug不规范，锒铛入狱～
- Spark资源分配异常闪Bug
- java go md5_Go语言中三种不同md5计算方式的性能比较
- Xorg可以使用hot-plug了,不过配置很麻烦
- linux查看perl进程,如何找到挂起perl脚本(linux进程)的位置
- Python爬取12306车次信息
- 吴伯凡-认知方法论-你心之外无世界
- 聪明的kk nyoj 171
- 强化学习的方法总结与分类
- C++中指针前还加是什么意思
- python用cartopy包画地图_python绘制地图的利器Cartopy使用说明
- 第十三届蓝桥杯大赛JavaB个人赛题题解
- 论文笔记：ReDet: A Rotation-equivariant Detector for Aerial Object Detection
- Android冷知识（2）常驻服务
热门文章
- python豆瓣影评_教你用python登陆豆瓣并爬取影评
- Docker容器技术——真的很细
- oracle时间去掉日期,Oracle 时间和日期处理
- Django @csrf_exempt不适用于基于通用视图的类(Django @csrf_exempt does not work on generic view based class)...
- 如何辨别ipad真假？如何鉴定ipad是否翻新？
- 两种方式构建vue单页面多组件应用
- Win10安装NetBeans8.2和JDK8
- 2.JSF 2006年大事纪：Exadel携RichFaces加入JSF组件库竞赛
- 哔哩哔哩验证码的破解
- RabbitMq使用场景解析以及优缺点