最近偶尔研究一下腾讯的JM-master解决方案，是主要解决移动端的。虽然这个库布更新了，也有了更好的替代品。但是我看里面的源码，写的简单又明了，还兼任大部分移动端。随意就拿出来一部分进行分享。
不多说了，上代码。
//检测是否支持3D属性
var isSupprot3d= function(){
// var transformStr = $D.getVendorPropertyName("transform");
// $D.setStyle(div ,transformStr ,"rotatex(90deg)");
// if(div.style[transformStr] == "") return false;
// return true;
var p_prop = $D.getVendorPropertyName("perspective");
return p_prop && p_prop in div.style;
}
//获取带有出产商的属性名
getVendorPropertyName : function(prop) {
var style = div.style;
var _prop;
if (prop in style) return prop;
// _prop = prop;
_prop = prop.charAt(0).toUpperCase() + prop.substr(1);
for(var i = vendors.length; i--;){
var v = vendors[i];
var vendorProp = v + _prop;
if (vendorProp in style) {
return vendorProp;
}
}
}
上面这个两个方法在库中负责检测浏览器是否支持CSS3D属性。
下面是动画库的内容。
//animation time, runType ,scale, rotate, rotateX, rotateY, translateX, translateY, skewX, skewY
J.$package(function(J){
var $D = J.dom,
$E = J.event,
$T = J.type;
//3d支持
var support3d = $D.isSupprot3d();
var finishedCount = 0;
//J.Class调用库内部模拟类的方法，返回一个新的方法newClass，所有的方法会被保存在newClass.prototype上供调用。
var Animation = J.Class({
//初始化
init:function(options){
this.setElems(options.selector);
this.setDuration(options.duration || 1000);
this.setRunType(options.runType || "ease-in-out");
this.setDelay(options.delay || 0);
this.setUsed3d(options.use3d);
this.transformArr = [];
},
//设置间隔时间，return this返回供链式调用。
setDuration:function(duration){
this.duration = duration;
return this;
},
//设置延迟时间
setDelay:function(delay){
this.delay = delay;
return this;
},
//获取操作DOM的元素
setElems:function(selector){
if($T.isString(selector)){
this.elems = $D.$(selector);
}
else if($T.isArray(selector)){
this.elems = selector;
}
else if(selector.tagName){
this.elems = [selector];
}
return this;
},
//设置动画类型(ease-in, ease-in-out)
setRunType:function(runType){
this.runType = runType;
return this;
},
//是否启用硬件加速
setUsed3d:function(use3d){
this.use3d = use3d;
return this;
},
//把2D缩放的参数存入动画数组。
scale:function(scale){
this.transformArr.push("scale(" + scale + ")");
return this;
},
//把3DX轴缩放的参数存入动画数组。
scaleX:function(scaleX){
this.transformArr.push("scalex(" + scaleX + ")");
return this;
},
//把3DY轴缩放的参数存入动画数组。
scaleY:function(scaleY){
this.transformArr.push("scaley(" + scaleY + ")");
return this;
},
//把2D旋转的参数存入动画数组。
rotate:function(rotate){
this.transformArr.push("rotate(" + rotate + "deg)");
return this;
},
//把3D旋转X轴的参数存入动画数组。
rotateX:function(rotateX){
this.transformArr.push("rotatex(" + rotateX + "deg)");
return this;
},
//把3D旋转Y轴的参数存入动画数组。
rotateY:function(rotateX){
this.transformArr.push("rotatey(" + rotateY + "deg)");
return this;
},
//把3D旋转Z轴的参数存入动画数组。
rotateZ:function(rotateZ){
this.transformArr.push("rotatez(" + rotateZ + "deg)");
return this;
},
//把2D和3D平移的参数存入动画数组。
translate:function(translateX,translateY,translateZ){
if(support3d && translateZ)
this.transformArr.push("translate3d" + '(' + translateX + ',' + translateY + ','+ translateZ +')');
else
this.transformArr.push("translate" + '(' + translateX + ',' + translateY + ')');
return this;
},
//把2D平移X轴的参数存入动画数组。
translateX:function(translateX){
this.translate(translateX,0);
return this;
},
//把2D平移Y轴的参数存入动画数组。
translateY:function(translateY){
this.translate(0,translateY);
return this;
},
//2D元素翻转指定角度
skew:function(x,y){
this.transformArr.push("skew(" + x + "deg," + y + "deg)");
return this;
},
//2D元素翻X轴转指定角度
skewX:function(x){
this.transformArr.push("skewx(" + x + "deg)");
return this;
},
//2D元素翻Y轴转指定角度
skewY:function(y){
this.transformArr.push("skewy(" + y + "deg)");
return this;
},
//设置样式
setStyle:function(styleName,styleValue){
var s = "";
if($T.isUndefined(this.styleStr)) this.styleStr = "";
//样式变化（如果是object类型）
if($T.isObject(styleName)){
//获取每一个样式的值
J.each(styleName ,function(sv,sn){
s += $D.toCssStyle($D.getVendorPropertyName(sn)) + ":" + sv + ";";
});
}
//样式变化（如果是string类型）
else if($T.isString(styleName)){
s += $D.toCssStyle($D.getVendorPropertyName(styleName)) + ":" + styleValue + ";";
}
this.styleStr += s;
return this;
},
//初始化
toOrigin:function(){
this.transformArr = [];
return this;
},
//
transit:function(onFinished){
var self = this;
var elems = this.elems;
J.each(elems ,function(e){
self._transit(e);
});
window.setTimeout(function(){
$E.fire(self,"end");
J.each(elems,function(elem){
$D.setStyle(elem ,$D.getVendorPropertyName("transition") ,"");
});
onFinished && onFinished.call(self);
},this.duration);
return this;
},
//
_transit:function(elem){
var self = this;
//获取动画数组中的参数
var transformStr = this.transformArr.join(" ");
if(support3d && this.use3d){
transformStr += " translatez(0)";
}
var aStr = "all"
+ ' ' + this.duration/1000 + 's '
+ this.runType
+ ' ' + this.delay/1000 + 's';
//设置样式 getVendorPropertyName添加浏览器前缀
$D.setStyle(elem ,$D.getVendorPropertyName("transition") ,aStr);
//设置 CSS3 transform属性，可以为浏览器添加transform变换
elem.style[$D.getVendorPropertyName("transform")] = transformStr;
//style.csstext批量处理CSS样式
elem.style.cssText += this.styleStr;
$E.fire(this ,"start");
}
});
J.Animation = Animation;
});
下面是这个库的主页，有兴趣可以看看。
JM Javascript Mobile Framework