vue实现类似添加购物车抛物线效果(类似饿了么,京东到家)

使用vue的transition来实现添加购物车的特效,效果如下:

为什么使用嵌套了的div来表示小球?

首先这是模拟了一个抛物线的效果,先普及一个基本知识,抛物线运动:分为水平的匀速运动和竖直向的自由落体(加速)。这里实现的思路是一个小球需要做2种运动,那么可以让这个小球做竖直向的加速运动,把这个小球放到一个盒子里面,让这个盒子做水平向的匀速运动。这样就完成模拟了一个抛物线运动,具体方法是在css里面分别设置transition,通过贝塞尔transition来模拟加速运动。

图示如下:

为什么使用了一个balls数组,而且存放5个元素

首先由于添加的过程,点击添加按钮可能比较连续,这样要模拟多个小球进入购物车的情况,所以需要预先准备几个box元素。为什么是5个?小球可以重复使用,根据网上的经验这里使用了5个,当然完全可以设置为7个8个。

 

具体代码见:https://github.com/rt-zhangxuefei/vue-add2cart-animation

vue
作者:张雪飞
出处:https://zhangxuefei.site/p/2036
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注