美文网首页
mTween动画框架封装-3

mTween动画框架封装-3

作者: kino2046 | 来源:发表于2019-10-16 02:33 被阅读0次

    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>


    相关文章

      网友评论

          本文标题:mTween动画框架封装-3

          本文链接:https://www.haomeiwen.com/subject/gioemctx.html