完成道理

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; // 待体系接纳
    });