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; // 待系统回收
    });