CSS3 抛物线 加入购物车

前言

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

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;}

说明

这里在说明下JS中的两个setTimeout。第一个setTimeout是等元素定位到起始点，第二个是抛物线动画自行完成后隐藏抛物点。
使用div中嵌入div：外面的div是outer,里面的是inner 。outer 的css设置其垂直方向运动，inner的css设置水平方式运动。为达到抛物线效果，inner的运动速度设置的匀速（linear），而outer运动速度由贝塞尔曲线(cubic-bezier(n,n,n,n))设定，贝塞尔曲线值可以参考示例中的值。

关于贝塞尔曲线值的设置可以看下大神的文章 贝塞尔曲线与CSS3动画、SVG和canvas的基情