vue框架制作购物车小球动画效果实例代码


Posted in Javascript onSeptember 26, 2019

最近在学习前端制作了一个购物车小球的动画效果

直接上图看看效果

vue框架制作购物车小球动画效果实例代码

下面介绍一下制作这个动画的详细过程:

1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数

<transition 
 		@before-enter="beforeEnter"
 		@enter="enter"
 		@after-enter="afterEnter">
 		<div class="ball" v-if="Ballflag" ref="ball"></div> //Ballflag默认指定为false不显示
 	</transition>

样式设置成一个红色的小球采用absolute定位确保不影响页面的其他元素

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		top: 413px;
		left: 80px;
		z-index: 99;
}

然后设置按钮 Ballflag = !Ballflag 取非 触发动画效果(这里就不多说了)

如果起始位置和终点位置都使用px固定死的话对于不同的分辨率的设备效果都有所不同所以为避免这一情况我采用了动态计算出 起始位置和终点位置下面是具体的动画的代码

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		top: 413px;
		left: 80px;
		z-index: 99;
}

通过动态的计算出起点位置和终点的位置来实现动画效果(优势可以适配不同分辨率的设备)看到现在似乎整个动画效果已经完成了。

不过我在测试使用的时候发现一个问题

当我点击按钮触发动画的时候往下拉滚动条发现动画终点的位置并不是期望的那样到达购物车的位置原因是我在给小球设置样式的时候给display设置的absolute绝对定位 只会计算出一个页面中的绝对的位置,无法跟着滚动条来动。后来又想到可以使用fixed布局相对这屏幕来运动不受页面滚动的影响所以实现的代码如下样式

.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: fixed;
		z-index: 99;
		top: 413px;
		left: 80px;

	}

****注意这里的boxPosition是页面中数量1的位置 即定位小球的位置

beforeEnter(el){
			
			var boxPosition = this.$refs.boxPosition.getBoundingClientRect();
			// console.log(boxPosition)
			// 获取目标的起始位置 
			var dist = boxPosition.y -413;
			el.style.transform = "translate(0,"+dist+"px)";
		},
		enter(el,done){
			el.offsetWidth;
			
			var boxPosition = this.$refs.boxPosition.getBoundingClientRect();
			var badgePosition = document.getElementById("badge").getBoundingClientRect();

			//目标的起始位置
			var dist = boxPosition.y -413; 
			
			// 这里因为是使用boxPosition的位置不是小球的位置所以-10调整一下误差
			var xDist = badgePosition.left - boxPosition.left -10; 

			//这里要加上起始的定位
			var yDist = badgePosition.top - boxPosition.top + dist;
			
			el.style.transform = "translate("+xDist+"px, "+yDist+"px)";
			el.style.transition = "all 1s ease";
			done();
		},
		afterEnter(el){
			this.Ballflag = !this.Ballflag;
		},

这里就已经完成了小球的动画效果了

这样的动画不会因为页面的滚动而无法准确的定位而且还能适配不同分辨率的设备。

总结

以上所述是小编给大家介绍的vue框架制作购物车小球动画效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
IDEA安装vue插件图文详解
Sep 26 #Javascript
layui use 定义js外部引用函数的方法
Sep 26 #Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 #Javascript
对Layer UI 模块化的用法详解
Sep 26 #Javascript
vue源码中的检测方法的实现
Sep 26 #Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 #Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 #Javascript
You might like
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
原生js实现购物车功能
2020/09/23 Javascript
使用python在本地电脑上快速处理数据
2017/06/22 Python
关于Django外键赋值问题详解
2017/08/13 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
详解python分布式进程
2018/10/08 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python os.listdir()乱码解决方案
2021/01/31 Python
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
婚宴邀请函
2015/01/30 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
vue实现简单数据双向绑定
2021/04/28 Vue.js
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python