自定义函数:获取/设置transform属性值及属性

责编:menVScode 2018-04-16 21:27 阅读(42)

transform中所有的变换都是基于矩阵来实现的, 但是这块也存在一个问题,就是没法获取样式中设置的动画属性值。通过 getComputedStyle(div[0])["transform"] 方式获取到的是一个矩阵数据,如:matrix(0.5, 0, 0, 0.5, 50, 0);通过 div[0].style.transform 方式获取到是所有的与transform相关的操作,比如: scale(0.5) translateX(100px),是一个字符串,但是需要我们进一步的处理才能获取到相应的值。

现在定义一个获取/设置transform属性值及属性的函数。

注意:如果要获取transform相关的属性,那transform相关的设置也必须是通过cssTransform()该方法进行设置。

function cssTransform(element,attr,value){
	if(!element.transform){
		element.transform = {}
	}

	if (typeof value == "undefined") {
		if(typeof element.transform[attr] == "undefined"){ 
			// 没有通过此方法设置transform,则返回默认值
			switch(attr){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					element.transform[attr] = 1;
					break;
				default:
					element.transform[attr] = 0;
			}
			return element.transform[attr];

		}
		return element.transform[attr]

	}else{
		element.transform[attr] = value;
		console.log(element.transform)
		var transformVal = "";
		for( var item in element.transform){
			// console.log(item)
			switch(item){
				case "scale":
				case "scaleX":
				case "scaleY":
				case "scaleZ":
					transformVal += " "+item+"("+element.transform[item]+")";
					break;
				case "rotate":
				case "rotateX":
				case "rotateY":
				case "rotateZ":
				case "skewX":
				case "skewY":
					transformVal += " "+item+"("+element.transform[item]+"deg)";
					break;
				default:
					transformVal += " "+item+"("+element.transform[item]+"px)";
			}
		}
		element.style.WebKitTransform = element.style.transform = transformVal;
	}
}
标签: transform
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码