在購物網站中，加入購物車的功能是必須的功能，比較大的購物網站（例如：某寶、某東）在點選加入購物車的時候，會將選中商品以拋物線方式彈入購物車內，提高使用者體驗。網上也有現成的外掛和教程，但是感覺寫的不是很清楚，自己就摸索了一下，寫一寫筆記。

實現方法大致分為兩種：

1、js計算座標實現

以點選新增按鈕位置作為座標原點建立座標系（這裡座標的Y軸與常見座標系的Y軸方向相反），然後就近取一個座標點，最後一個點為購物車位置，三個點建立一個y=ax²+bx+c的拋物線，然後水平方向勻速移動改變x值，根據公式計算出y值，改變小球的位置，在視覺暫留的時間段內不停改變小球的位置，實現拋物線特效，特效截圖：

2、css利用transition動畫實現

將小球的拋物線分解成水平方向和垂直方向，然後小球用兩個div（暫定為outer和inner）來實現，outer控制水平方向勻速移動，inner控制垂直方向利用貝塞爾曲線進行變速運動，css設定好transition的transform，然後改變outer和inner的位置（使用translate3d），最後，就能合成一個拋物線的路徑，效果圖如下：Github地址

兩種方法比較：

js方法：

優勢：利用js計算座標，相容性比較好

劣勢：計算比較複雜，肯定也沒有css動畫來得流暢

css方法：

優勢：絲般柔順，實現簡單

劣勢：相容性比較差，要相容css3的屬性