html5實現購物車拋物線

實現原理

1.利用運動的合成原理，在水平方向上，執行勻速運動，在豎直方向上執行勻變速運動，合成後的物體運動軌跡即是拋物線。
2.須要使用兩個標籤，一個父標籤，一個子標籤，運動曲線分別綁定在對應的兩個標籤上。
3.肯定起始位置和結束位置點。

css樣式

.parent{
    position:absolute; 
    z-index:10; 
    -webkit-transition:all 0.5s cubic-bezier( 0.39,-0.4,0.5,0 ) 0s; // 能夠自定義
}
.child{
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background-color:#f9b52c; 
    -webkit-transition:all 0.5s linear 0s; // 能夠自定義
}

js代碼段

var curveMove = function ( node ){ // node 爲點擊的節點
    var 
    xStar = node.offset().left + node.width() / 2, // 獲取起始點橫座標
    yStar = node.offset().top - node.height() / 2, // 獲取起始點縱座標
    width = 20,height = 20,
    nodeOffset = $('.aim').offset(), // 購物車偏移量
    xEnd = nodeOffset.left + width / 2, // 結束點橫座標
    yEnd = nodeOffset.top + height / 2; // 結束點縱座標
    $('<div class="parent"><div class="child"></div></div>').appendTo('body');
    var 
    outer = $('.parent').last().css({ left : xStar, top : yStar }),
    inner = outer.children();
    setTimeout(function(){ // 延時一下，避免 transition 不執行
        outer[0].style.transform = 'translate3d(0,' + ( yEnd - yStar )+ 'px,0)';
        inner[0].style.transform = 'translate3d(' + ( xEnd - xStar )  + 'px,0,0)';
        }, 30 );
    };
 // 最後將已經結束的動畫節點清除，這裏用到了 transitionEnd 監聽事件，代碼以下：
    document.addEventListener("webkitTransitionEnd", function( e ){
        // 監聽動畫是否執行完，若執行完則清除相應的節點，
        var node = $(e.target).remove();
        node = null; // 待系統回收
    });