CSS3 抛物线 加入购物车

前言

项目中用到购物车抛物线动画 一开始使用的是Jquery插件 jquery.fly.js;在手机上使用时一些较手机效果不是很好，因为这个插件会根据抛物线动画时间和距离计算抛物线点轨迹（FPS，说是一秒要有60帧的样子）会有卡顿现象，而且还有window.requestAnimationFrame的兼容性问题 ，如果在只是PC段使用还是挺好的。下面介绍我们使用CSS3的方式。

开始介绍之前，建议看下大神的文章 贝塞尔曲线与CSS3动画、SVG和canvas的基情

Demo下载地址:http://download.csdn.net/detail/king_jw/9115151 包含完整的demo,请勿使用demo中的页面和图片

使用的是Css3 两个元素，外面的元素纵坐标移动，里面的元素横坐标移动 不使用keyframe

先贴代码

JavaScript

预设5个抛物点，这部分视情况是否要这样做

var $pointDiv = $('<div id="pointDivs">').appendTo('body');
for(var i = 0;i<5;i++){
    $('<div class="point-outer point-pre"><div class="point-inner"/》</div>').appendTo($pointDiv);
}

点击事件代码

//获取开始点坐标
var startOffset = $(ev.target).offset();
//获取结束点坐标
var endTop = window.innerHeight - 30, endLeft = 20,left = startOffset.left+10,top = startOffset.top+10;
var outer = $('#pointDivs .point-pre').first().removeClass("point-pre").css({left:left+'px',top:top+'px'});
var inner = outer.find(".point-inner");
setTimeout(function(){
    outer[0].style.webkitTransform = 'translate3d(0,'+(endTop - top)+'px,0)';
    inner[0].style.webkitTransform = 'translate3d('+(endLeft - left)+'px,0,0)';
    setTimeout(function(){
        outer.removeAttr("style").addClass("point-pre");
        inner.removeAttr("style");
    },800);
},1);

CSS

.point-outer{ position:absolute; z-index:20; -webkit-transition:all 0.8s cubic-bezier(0.39,-0.4,0.83,0.23) 0s; }
.point-inner{ width:10px; height:10px; border-radius:50%; background-color:#ff6326; -webkit-transition:all 0.8s linear 0s; }
.point-outer.point-pre{ display:none; }

说明

使用div中嵌入div：外面的div是outer,里面的是inner 。outer 的css设置其垂直方向运动，inner的css设置水平方式运动。为达到抛物线效果，inner的运动速度设置的匀速（linear），而outer运动速度由贝塞尔曲线(cubic-bezier(n,n,n,n))设定，贝塞尔曲线值可以参考示例中的值。

这里在说明下JS中的两个setTimeout。第一个setTimeout是等元素定位到起始点，第二个是抛物线动画自行完成后隐藏抛物点。