标签：遍历 mat 绑定 ++ 无法 case 一个 and 原理
前言： 大家都知道，在移动端进行操作结点移动时，我们都会使用操作transform来代替top等用以提高性能，必要的时候还可开启3d加速。我们都会使用getComputedStyle来获取结点的最终样式，但使用getComputedStyle来获取transform时我们获取到的是一个矩阵值，而且是无法通过设置矩阵值反向设置transform的效果的。如下：
body.style.WebkitTransform = ‘translateY(50px)‘ getComputedStyle(body)[‘transform‘] // "matrix(1, 0, 0, 1, 0, 50)"
综上，在设置transform的时候和常规样式设置的方式就有区别了，而cssHandler就是一个用来获取和设置css样式的函数，这其中就兼容了transform的获取和设置。
首先是transformHandler函数的封装，这其中的原理就是： 实时在需要获取或设置transform样式的元素上绑定自定义的transform具体值，需要获取时便从中获取，需要设置的时候便在其中的基础上进行设置。
transformHandler函数如下：
function transform (el, attr, val) { if (!el.transform) { el.transform = { }; } if (val === undefined) { return el.transform[attr]; } el.transform[attr] = val; var str = ""; // 此处要注意必须要在原由的基础上遍历 for (var s in el.transform) { switch (s) { case "rotate": case "rotateX": case "rotateY": case "rotateZ": case "skewX": case "skewY": str += s + "(" + el.transform[s] + "deg) "; break; case "scale": case "scaleX": case "scaleY": str += s + "(" + el.transform[s] + ") "; break; case "translateX": case "translateY": case "translateZ": str += s + "(" + el.transform[s] + "px) "; break; } } el.style.WebkitTransform = el.style.transform = str; }
然后在将transformHandler与常规的样式处理方式进行合并，得到cssHandler如下：
function css (el, attr, val) { var transformAttr = ["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "scale", "scaleX", "scaleY", "translateX", "translateY", "translateZ"]; for (var i = 0; i < transformAttr.length; i++) { if (attr === transformAttr[i]) { return transform(el, attr, val); } } if (val === undefined) { val = getComputedStyle(el)[attr]; console.log(val); val = parseFloat(val); return val; } if (attr === "opacity") { el.style[attr] = val; } else { el.style[attr] = val + "px"; } }
移动端滑动全应用【二】会分享移动端的幻灯轮播图的实际操作。
请持续关注。。。
移动端滑屏全应用【一】cssHandler操作基础动画函数封装
标签：遍历 mat 绑定 ++ 无法 case 一个 and 原理
原文地址：https://www.cnblogs.com/pomelott/p/9976419.html
