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

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

实现方法大致分为两种：

1、js计算坐标实现

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

2、css利用transition动画实现

将小球的抛物线分解成水平方向和垂直方向，然后小球用两个div（暂定为outer和inner）来实现，outer控制水平方向匀速移动，inner控制垂直方向利用贝塞尔曲线进行变速运动，css设置好transition的transform，然后改变outer和inner的位置（使用translate3d），最后，就能合成一个抛物线的路径，效果图如下：Github地址

两种方法比较：

js方法：

优势：利用js计算坐标，兼容性比较好

劣势：计算比较复杂，肯定也没有css动画来得流畅

css方法：

优势：丝般柔顺，实现简单

劣势：兼容性比较差，要兼容css3的属性