js+css+html购物车动画特效

在购物网站中，加入购物车的功能是必须的功能，比较大的购物网站（例如：某宝、某东）在点击加入购物车的时候，会将选中商品以抛物线方式弹入购物车内，提高用户体验。网上也有现成的插件和教程，但是感觉写的不是很清楚，自己就摸索了一下，写一写笔记。

实现方法大致分为两种：

1、js计算坐标实现

以点击添加按钮位置作为坐标原点建立坐标系（这里坐标的Y轴与常见坐标系的Y轴方向相反），然后就近取一个坐标点，最后一个点为购物车位置，三个点建立一个y=ax²+bx+c的抛物线，然后水平方向匀速移动改变x值，根据公式计算出y值，改变小球的位置，在视觉暂留的时间段内不停改变小球的位置，实现抛物线特效，特效截图：GitHub地址

2、css利用transition动画实现

将小球的抛物线分解成水平方向和垂直方向，然后小球用两个div（暂定为outer和inner）来实现，outer控制水平方向匀速移动，inner控制垂直方向利用贝塞尔曲线进行变速运动