概述
传统的使用transfrom,直接设置值,未免太过粗暴,且代码冗长复杂,例 :
var rotate = document.querySelector(".rotate");
rotate.addEventListener("touchstart",()=>{
rotate.style.transform = rotate.style.transform = "rotate(90deg)";
})
因为存在这种情况,所以想办法把它简化,方便维护,可读性强。
开始封装
调用此方法可以是获取元素或是设置元素的值,以value判断,有则是设置值,无value则是取值
function cssTransform(element, prop, value) {
// element 将要操作的元素
// prop 将要进行的运动属性,缩放,旋转等等
// value 具体值
// 为了方便操作, 给该调用的元素定义一个属性
var transform,
transformValue = "";
if (element.transform === undefined) {
element.transform = transform = Object.create(null);
// 这里创建了一个纯净的对象 没有原型链 提高循环效率
}
// 设置元素
if (value !== undefined) {
element.transform[prop] = value;
transform = element.transform;
// 因为transform对象中可能不止一个属性,所以要对其进行遍历
for (var name in transform) {
switch (name) {
case "scale":
case "scaleX":
case "scaleY":
transformValue += " " + name + "(" + transform[name] + ")";
break;
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
transformValue += " " + name + "(" + transform[name] + "deg)";
break;
default:
transformValue += " " + name + "(" + transform[name] + "px)";
}
}
element.style.WebkitTransform = element.style.transform = transformValue;
} else {
// 读取元素
return element.transform[prop];
}
}
使用说明
var rotate = document.querySelector(".rotate");
rotate.addEventListener("touchstart",()=>{
// 设置属性 传三个值
cssTransform(rotate,"rotate",90);
// 读取属性 传两个值便可
console.log(cssTransform(rotate,"rotate");
})
FAQ:
一个简单的版本就完成了,不难,当然还是很low的版本,后续会进行优化。