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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
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
php adodb分页实现代码
2009/03/19 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
如何编写python的daemon程序
2021/01/07 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
怒海潜将观后感
2015/06/11 职场文书
小学信息技术教学反思
2016/02/16 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android