网页的灵魂，游荡在人机之间的互动——Vuejs动画体验
2024-06-02 03:23:51
目录
- 一、使用过渡类名实现动画
- 二、自定义v-前缀
- 三、钩子函数实现半场动画的介
- 四、钩子函数实现小球半场动画
- 五、小球动画每次重新开始的位置
- 六、使用transition-group元素实现群体动画
- 七、实现列表删除和删除时候的动画
- 八、transition-group中appear和
一、使用过渡类名实现动画
返回目录
图解vue动画：
我们先看看不使用动画的显示与消失的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title>
</head>
<body>
<div id="app"><input type="button" value="toggle" @click="flag=!flag"><!--需求:点击按钮,让h3显示,再点击,让h3隐藏--><h3 v-if="flag">这是一个H3</h3>
</div><script src="../js/vue.js"></script>
<!--我这里是局部引入Vue.js-->
<script>const app = new Vue({el: '#app',data: {flag:false},methods:{}});
</script>
</body>
</html>
效果大家自己试试
我们再试试使用过渡类名实现动画：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><!--2.自定义两组样式，来控制transition内部的元素实现动画--><style>/*v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*//*v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时 元素动画已经结束了*//*第一组*/.v-enter-from,.v-leave-to{opacity: 0;}/*v-enter-active 【入场动画的时间段】*//*v-leave-active 【出场动画的时间段】*//*第二组*/.v-enter-active,.v-leave-active{transition: all 0.4s 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 src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag:false},methods:{}});
</script>
</body>
</html>
效果大家也可以试试
我们再加上位移：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><!--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 src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag:false},methods:{}});
</script>
</body>
</html>
二、自定义v-前缀
返回目录
给transition设定name属性，区别不同动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><!--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 src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag:false,flag2:false},methods:{}});
</script>
</body>
</html>
三、钩子函数实现半场动画的介绍
返回目录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><!--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>--><!--使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长--><!--<transition><h3 v-if="flag" class="animated">这是一个H3</h3></transition>--><!--使用 :duration="{ enter: 200 , leave: 400}" 来分别设置 如场的时长 和 离场的时长--><transitionenter-active-class="bounceIn"leave-active-class="bounceOut":duration="{enter: 200 ,leave: 400}"><h3 v-if="flag" class="animated">这是一个H3</h3></transition>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag:false},methods:{}});
</script>
</body>
</html>
四、钩子函数实现小球半场动画
返回目录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><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="TheBeforeEnter"@enter="entered"@after-enter="afterEnter"><div class="ball" v-show="flag"></div></transition>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag:false},methods:{/*注意：动画钩子函数的第一个参数：el，表示要执行动画的那个dom元素，是个原生的JS DOM对象*//*大家可以认为， el是通过document.getElementById('')方式获取到的原生js dom对象*/TheBeforeEnter(el){//beforeEnter表示动画入场之前，此时动画尚未开始，可以在beforeEnter中设置元素开始动画之前的起始样式//设置小球开始动画之前的,起始位置el.style.transform="translate(0,0)"},entered(el,done){/*//这句话没有实际作用，但是如果不写，出不来动画效果//可以认为el.offsetWidth会强制刷新动画el.offsetWidth//enter表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态el.style.transform="translate(150px,450px)"el.style.transform="all 1s ease"*/// 不知道为什么使用el.offsetWidth没有效果了，这里找到了一个新的方法：setTimeout(() => {//动画完成后的样式el.style.transform = 'translate(150px,450px)'//动画transition样式el.style.transition = 'all 1s ease'}, 20)/*这里的done，起始就是afterEnter这个函数，也就是说done是afterEnter的引用*/done()},afterEnter(el){/*动画完成之后会调用afterEnter*/this.flag=!this.flag}}});
</script>
</body>
</html>
五、小球动画每次重新开始的位置
返回目录
因为每次点击都会重新执行TheBeforeEnter函数
六、使用transition-group元素实现群体动画
返回目录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><style>li{border: 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;}li:hover{background-color: hotpink;transition: all 0.5s ease;}.v-enter,.v-leave-to{opacity: 0;transform: translateY(80px);}.v-enter-active,.v-leave-active{transition: all 0.6s ease;}</style>
</head>
<body>
<div id="app"><div><label for="">Id:<input type="text" v-model="id"></label><label for="">Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><ul><!--在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup--><!--如果要为v-for设置动画，必须为每一个元素设置:key属性--><transition-group><li v-for="item in list" :key="item.id">{{item.id}}----{{item.name}}</li></transition-group></ul>
</div><script src="../js/vue.js"></script>
<script>const app = 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.toString()})}}});
</script>
</body>
</html>
七、实现列表删除和删除时候的动画
返回目录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Title</title><style>li{border: 1px dashed #999;margin: 5px;line-height: 35px;padding-left: 5px;font-size: 12px;width: 100%;/*防止li在执行动画的时候宽度变短*/}li:hover{background-color: hotpink;transition: all 0.5s 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 for="">Id:<input type="text" v-model="id"></label><label for="">Name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><ul><!--在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup--><!--如果要为v-for设置动画，必须为每一个元素设置:key属性--><transition-group><li v-for="(item,index) in list" :key="item.id" @click="del(index)">{{item.id}}----{{item.name}}</li></transition-group></ul>
</div><script src="../js/vue.js"></script>
<script>const app = 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.toString()})},del(index){this.list.splice(index,1)}}});
</script>
</body>
</html>
八、transition-group中appear和
返回目录
transition-group引发的不规范：
对此我们应该做出修改：
解决：
网页的灵魂，游荡在人机之间的互动——Vuejs动画体验相关推荐
- 寻找人机之间的中间地带-评述3本人机协作的书
来源: 混沌巡洋舰 1 AI 错觉 知其然,更要知其所以然,了解数据挖掘的算法的基础原理,可以在这个人工智能和大数据可能比工业革命更能改变人的一生的历史时期中,更有智慧的应用人工智能.AI错觉这本书1 ...
- PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装 动画实现原理 简单动画函数封装 动画函数给不同元素记录不同定时器 缓动效果原理 动画函数多个目标值之间移动 缓动函 ...
- 在Visual Studio中使用序列图描述对象之间的互动
当需要描述多个对象之间的互动,可以考虑使用序列图. 在建模项目下添加一个名称为"Basic Flow"的序列图. 比如描述客户是如何在MVC下获取到视图信息的. 备注: ● 通常是 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- 会员营销如何提升企业与会员之间的互动频率
在当前的用户运营方面,选择一个好的运营方式尤其重要,为什么呢?这是因为用户运营不是一句口号,它需要真正的运营才能产生想要的效果,企业需要充分的调动用户,然后让其贡献有价值的行为,这样一来才能促进效果的 ...
- 人机之间的对话交互会如何发展——可控性与智能性的权衡
雷锋网按:本文作者,吴金龙,2010年获得北京大学数学院计算数学专业博士学位,期间研究方向为推荐系统中的协同过滤算法.毕业后加入阿里云,主要从事PC和云手机的输入法开发.2011年加入世纪佳缘,负责世 ...
- jquery与php数据传输,【网页制作-jquery, php】key-value 网页书签（php与js之间的数据传递）...
为网站首页添加一个"key-value"传送门功能 msds是key,value是对应的网址 image.png 可以跳转到任意网址,不限于自己的网站,比如输入"猫&qu ...
- 网页设计师和网站开发人员之间的区别是什么！
前端网页设计 网页制作 网站开发 这些你也可以叫做3个网站建设的核心部分.下面一一分析: 前端网页设计师 前端网页设计师,这在我看来,他将负责网站的整体规划.布局和网站特效的渲染工作,包括视觉上的效果 ...
最新文章
- 屏幕显示密度dpi_PPI和DPI有什么区别？
- 解决VS2013中出现类似于error C4996: 'scanf': This function or variable may be unsafe的安全检查错误
- Ubuntu Docker安装
- 【听哥一句劝，C++水很深，你把握不住啊！】C++提高班之 符与*符
- 当 IDENTITY_INSERT 设置为 OFF 时，不能为表中的标识列插入显式值
- JNDI数据源的配置
- 有关 iOS 的开发证书、应用标识、设备标识、配置文件以及密钥 #DF...
- 网页设计个人主页源码_WebSSH - 网页上的SSH终端
- Cannot resolve xxxx(依赖名):unknown
- 2.mysql数据库如何安装_MySQL数据库如何安装
- 人脸识别资源推荐：20款人脸检测/识别的API、库和软件
- 万字长文详解二叉树算法，再也不怕面试了！| 技术头条
- 递归典型——汉诺塔问题
- sh-3.2非正常修正
- 【紫书第六章】链表(list)、栈和双向队列(deque)
- SlickEdit介绍
- 图像识别中的边框回归笔记，终于搞明白了啊！
- selenium小白学习笔记（6） - 使用parameterized参数化
- 移动端下拉刷新，兼容ios，Android及微信浏览器
- TextView描边、渐变、阴影效果