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 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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学习 计数器实例代码
2008/06/15 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python对url格式解析的方法
2015/05/13 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python实现批量修改文件名
2020/03/23 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
学生操行评语大全
2014/04/24 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
大学运动会通讯稿
2015/07/18 职场文书
环保建议书范文
2015/09/14 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android