当前位置: 首页 > 编程笔记 >

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

钱志义
2023-03-14
本文向大家介绍vue框架制作购物车小球动画效果实例代码,包括了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.offhtml" target="_blank">setWidth;
			
			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框架制作购物车小球动画效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 本文向大家介绍vue实现购物车抛物线小球动画效果的方法详解,包括了vue实现购物车抛物线小球动画效果的方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现购物车抛物线小球动画效果的方法。分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实

  • 本文向大家介绍iOS添加购物车动画效果示例,包括了iOS添加购物车动画效果示例的使用技巧和注意事项,需要的朋友参考一下 一、计算动画开始结束点位置 方法: 1) 动画开始位置fromCenter 2)动画结束位置endCenter 二、计算贝塞尔曲线(抛物线)的两个控制点 controlPoint1是控制点1 controlPoint2是控制点2 A是controlPoint1和controlPo

  • 本文向大家介绍详解Android实现购物车页面及购物车效果(点击动画),包括了详解Android实现购物车页面及购物车效果(点击动画)的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Android实现购物车页面及购物车效果(点击动画),分享给大家,具体如下: 效果图如下: 思路: (1)思考每个条目中的数字的更新原理。 (2)购物车的动画效果。 (3)购物清单怎么显示(这个我暂时没有写,如果需

  • 本文向大家介绍Angularjs 制作购物车功能实例代码,包括了Angularjs 制作购物车功能实例代码的使用技巧和注意事项,需要的朋友参考一下 初学angularJS   闲暇之余做了个小案例。 功能:计算购物车商品的价格,以及删除购物车商品。 以下是完整案例(jQuery和angularjs需要自己引入) 效果如图所示:  尊重劳动成果,转载请注明出处(http://blog.csdn.ne

  • 本文向大家介绍jQuery实现加入购物车飞入动画效果,包括了jQuery实现加入购物车飞入动画效果的使用技巧和注意事项,需要的朋友参考一下 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 然后,我们还需要在页面的右侧加上购物车以及

  • 本文向大家介绍Android实现添加商品到购物车动画效果,包括了Android实现添加商品到购物车动画效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android添加商品到购物车的具体代码,供大家参考,具体内容如下 实现需求 在商品列表页面中,从列表item添加商品时,实现一个动画,给人感觉像是在添加商品到购物车。 思路 1、获取各个动画执行对象的起点和终点的坐标,利用Path