vue怎么实现购物车小球动画效果

这篇文章主要介绍“vue怎么实现购物车小球动画效果”，在日常操作中，相信很多人在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.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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

到此，关于“vue怎么实现购物车小球动画效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！