mTween动画框架封装-3

21.transform

22.添加transform的处理

23.特殊样式获取、批量设置

---

21.transform

---

22.添加transform的处理

/*

    css 函数

*/  

var transformAttr = [

    "rotate",

    "rotateX",

    "rotateY",

    "rotateZ",

    "translateX",

    "translateY",

    "translateZ",

    "scale",

    "scaleX",

    "scaleY",

    "skewX",

    "skewY"

]; 

function css(el,attr,val){

    if(transformAttr.indexOf(attr) >= 0){

        return setTransform(el,attr,val);

    }

    if(val === undefined){

        return parseFloat(getComputedStyle(el)[attr]);

    } else {

        if(attr == "opacity"){

            el.style[attr] = val;

            el.style.filter = "alpha(opacity="+(val*100)+")";

        } else {

            el.style[attr] = val + "px";

        }

    }

}

function setTransform(el,attr,val){

    el.transform = el.transform||{};

    if(val === undefined){

        return  el.transform[attr];

    }

    el.transform[attr] = val;

    var transformVal = "";

    for(var s in  el.transform){

        switch(s){

            case "rotate":

            case "rotateX":

            case "rotateY":

            case "rotateZ":

            case "skewX":

            case "skewY":

                transformVal += s+'('+ el.transform[s]+'deg) ';

                break;

            case "translateX":

            case "translateY":

            case "translateZ":

                transformVal += s+'('+ el.transform[s]+'px) ';

                break;

            case "scale":

            case "scaleX":

            case "scaleY":

                transformVal += s+'('+ el.transform[s]+') ';

                break;       

        }

    }

    el.style.WebkitTransform = el.style.transform = transformVal.trim();

}

(function(){

    var box = document.querySelector("#box");

    css(box,"rotate",0)

    css(box,"translateX",0)

    // console.log(css(box,"rotate"));

    console.log(css(box,"background"));

    mTween({

        el: box,

        attr: {

            rotate: 360

        },

        duration: 800,

        cb: function(){

            mTween({

                el: box,

                attr: {

                    translateX: 100

                }

            });

        }

    });

})();

---

23.特殊样式获取、批量设置

<script>

/*

    css 函数

*/  

var transformAttr = [

    "rotate",

    "rotateX",

    "rotateY",

    "rotateZ",

    "translateX",

    "translateY",

    "translateZ",

    "scale",

    "scaleX",

    "scaleY",

    "skewX",

    "skewY"

]; 

var normalAttr = [

    "width",

    "height",

    "left",

    "top",

    "right",

    "bottom",

    "marginBottom",

    "marginleft",

    "marginRight",

    "marginTop",

    "paddingLeft",

    "paddingRight",

    "paddingTop",

    "paddingBottom"

];

/*

attr:{

    width: 100,

    height: 200,

    background:

}

*/

function css(el,attr,val){

    if(typeof attr == "object"){

        for(var s in attr){

            css(el,s,attr[s]);

        }

        return ;

    }

    if(transformAttr.indexOf(attr) >= 0){

        return setTransform(el,attr,val);

    }

    if(val === undefined){

        val = getComputedStyle(el)[attr]; 

        return normalAttr.indexOf(attr)>=0||!isNaN(val)?parseFloat(val):val;

    } else {

        if(attr == "opacity"){

            el.style[attr] = val;

            el.style.filter = "alpha(opacity="+(val*100)+")";

        } else if(normalAttr.indexOf(attr)>=0) {

            el.style[attr] = val + "px";

        } else if(attr == "zIndex") {

            el.style[attr] = Math.round(val);

        } else {

            el.style[attr] = val;

        }

    }

}

function setTransform(el,attr,val){

    el.transform = el.transform||{};

    if(val === undefined){

        return  el.transform[attr];

    }

    el.transform[attr] = val;

    var transformVal = "";

    for(var s in  el.transform){

        switch(s){

            case "rotate":

            case "rotateX":

            case "rotateY":

            case "rotateZ":

            case "skewX":

            case "skewY":

                transformVal += s+'('+ el.transform[s]+'deg) ';

                break;

            case "translateX":

            case "translateY":

            case "translateZ":

                transformVal += s+'('+ el.transform[s]+'px) ';

                break;

            case "scale":

            case "scaleX":

            case "scaleY":

                transformVal += s+'('+ el.transform[s]+') ';

                break;       

        }

    }

    el.style.WebkitTransform = el.style.transform = transformVal.trim();

}

(function(){

    var box = document.querySelector("#box");

    css(box,{

        width: 200,

        height: 200,

        background: "yellow"

    });

})();

</script>

---