您的位置:首页 > Web前端 > CSS

CSS3 抛物线 加入购物车

2015-07-31 16:42 519 查看

前言

项目中用到购物车抛物线动画 一开始使用的是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的基情
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: