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 cookie插件代码类
May 26 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
vue项目中axios使用详解
Feb 07 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 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编码转换
2012/11/05 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python中几种操作字符串的方法的介绍
2015/04/09 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
机械系毕业生求职信
2014/05/28 职场文书
化工实习心得体会
2014/09/09 职场文书
计划生育诚信协议书
2014/11/02 职场文书
婚宴父母致辞
2015/07/27 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书