需要注意的是:
如果想要使用该封装函数获取transform相关的属性,那么transform相关的设置,也必须是通过该方法设置的
使用介绍:分为取值和赋值,如果有val值,则为赋值,没有则为取值
调用:
获取transfrom相关属性的值,cssTransform(element,attr)
设置transform相关属性的值:cssTransform(element,attr,val)
参数说明:
element:要进行动画的元素
attr:运动的属性(包括scale系列,translate系列,skew系列)
val:运动的属性的值,比如30deg,100px啦等等(当然不用带单位哦)
!注意:如果attr是放大缩小(scale),我们想要放大2倍,val写为200,放大0.5倍,val写50(下面我们处理的时候会除以100)
使用如下:
cssTransform(obj,'rotate',30);
cssTransform(obj,'scale',200);//放大2倍
cssTransform.js封装函数如下
function cssTransform(element, attr, val){ //下面分为取值和赋值阶段,如果val不存在说明是取值的,如果val存在,说明是赋值阶段 //取值阶段 if(!element.transform){ element.transform = {}; } if(typeof val === "undefined"){ //取值阶段,又要分为,该值已经有了,和初始化该值阶段 if(typeof element.transform[attr] === "undefined"){ switch(attr){ case "scale": case "scaleX": case "scaleY": case "scaleZ": element.transform[attr] = 100; break; default: element.transform[attr] = 0; } } //取值完毕,返回该值 return element.transform[attr]; } else { //下面为赋值阶段 element.transform[attr] = val; var transformVal = ""; //因为transform对象中可能不止一个属性,所以要对其进行遍历 for(var s in element.transform){ switch(s){ case "scale": case "scaleX": case "scaleY": case "scaleZ": transformVal += " " + s + "("+(element.transform[s]/100)+")"; break; case "rotate": case "rotateX": case "rotateY": case "rotateZ": case "skewX": case "skewY": transformVal += " " + s + "("+element.transform[s]+"deg)"; break; default: transformVal += " " + s + "("+element.transform[s]+"px)"; } } element.style.WebkitTransform = element.style.transform = transformVal; } }