移動端滑屏全應用【一】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";
    }
}

移動端滑動全應用【二】會分享移動端的幻燈輪播圖的實際操做。

請持續關注。。。