最近，在研究的前端制作了一个购物车球的动画效果

直接看上面的效果

下面我们来介绍一下制作这个动画的详细过程：

1.因为使用vue lock industry，需要用transition tag包装和指定动画的三个动画生命周期函数

transition @ before-enter=' before enter ' @ enter=' enter ' @ after-enter=' after enter ' div class=' ball ' v-if=' ball flag ' ref=' ball '/div//ball flag默认指定为false，不显示。过渡样式设置为红色球。采用绝对定位，确保页面不受影响。球{ width: 15px高度： 15px；边界半径：50%；背景-颜色：红色；绝对位置：top: 413pxleft: 80pxz-index : 99；}然后设置按钮Ballflag=！Ballflag采用非触发动画效果(这里就不多说了)

如果起始位置和结束位置用px固定，那么不同分辨率设备的效果是不一样的，所以为了避免这种情况，我使用了起始位置和结束位置的动态计算。以下是具体的动画代码。球{ width: 15px高度： 15px；边界半径：50%；背景-颜色：红色；绝对位置：top: 413pxleft: 80pxz-index : 99；}

动画效果是通过动态计算起点的位置和终点的位置来实现的(优点可以适应不同分辨率的设备)。现在好像整个动画效果都完成了。

然而，我在测试时发现了一个问题

当我点击按钮触发动画时，我拉下滚动条，发现动画的结束位置并没有像预期的那样到达购物车。原因是当我为球设置样式时，为显示设置的绝对位置仅计算页面中的绝对位置，无法跟随滚动条。后来我觉得可以用固定布局相对这个屏幕移动，不受页面滚动的影响，所以实现的代码如下。球{ width: 15px高度： 15px；边界半径：50%；背景-颜色：红色；位置：固定；z-index : 99；top: 413pxleft: 80px} * * * * *注意这里的boxPosition是页面中数字1的位置，也就是球所在的位置

before EnTER(El){ var BoxPosition=this。$ refs . BoxPosition . GetBoundingClientRect()；//console.log(boxPosition)//获取目标var dist=boxPosition.y -413的起始位置；El . style . transform=' translate(0，' dist ' px)'；}，输入(el，done){ El . offsetwithts；var boxPosition=this。$ refs . BoxPosition . GetBoundingClientRect()；var BadgePosition=document . GetElementByID('徽章')。getBoundingClientRect()；//目标var dist=boxPosition.y -413的起始位置；//这里，因为用boxPosition代替了球位，-10调整误差var xdist=徽章位置。左盒位置。左-10；//在此添加初始定位var ydist=badge position . top-box position . topdist；El . style . transform=' translate(' Xdist ' px，' yDist ' px)'；el.style.transition='全1 ease '；done()；}，afterEnter(el){this。Ballflag=！这个。Ballflag}，球的动画效果已经在这里完成了

这类动画由于页面的滚动无法准确定位，也可以适配不同分辨率的设备。

摘要

以上是边肖介绍的用vue框架制作购物车球卡通效果的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！