移动端滑屏全应用【一】cssHandler操作基础动画函数封装

前言： 大家都知道，在移动端进行操作结点移动时，我们都会使用操作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";
    }
}

移动端滑动全应用【二】会分享移动端的幻灯轮播图的实际操作。

请持续关注。。。

原文地址：https://www.cnblogs.com/pomelott/p/9976419.html