用原生js封装transform函数

最新推荐文章于 2024-01-27 02:12:59 发布

前端搬砖达人

最新推荐文章于 2024-01-27 02:12:59 发布

阅读量1.3k

点赞数 1

分类专栏： js知识运用文章标签：原生js 封装函数 transform

本文链接：https://blog.csdn.net/wyq12138/article/details/86157416

版权

js知识运用专栏收录该内容

13 篇文章 0 订阅

订阅专栏

原生js实现tranform动画效果
原理：封装传参 1.判断是否含有动画创建对象 2.判断读和写
封装用自定义函数(function (w){})(window) w为形参 window为实参
将函数赋予w的属性调用即可
传参(node,name,value) node为元素 name为tranform属性 value为值
1.1.判断是否含有动画创建对象

if(!node.transform){
            /*无为添加transform对象*/
            node.transform={};
        }

2.判断读和写通过argument.length的值判断
写 1.将属性存入对象中 2.使用for in 遍历对象 3. switch判断属性 4.返回对象中对应的属性值

if(arguments.length>2){
            //写
            /*名值对添加到对象*/
            node.transform[name]=value;
            var result="";
            for(var item in node.transform){
                switch (item){
                    case 'rotate':
                    case 'skew':
                    case 'skewX':
                    case 'skewY':
                    case 'skewZ':
                        /*通过判断transform类型在对象中调出相应的item值*/
                        result += item+ '('+ node.transform[item] +'deg) ';
                        break;
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                    case 'scaleZ':
                        result += item+ '('+ node.transform[item] +') ';
                        break;
                    case 'translate':
                    case 'translateX':
                    case 'translateY':
                    case 'translateZ':
                        result += item+ '('+ node.transform[item] +'px) ';
                        break;
                };
            }
            node.style.transform=result;
        }

读
判断属性是否为空为空则设置默认值不为空则在对象中获取值

//读
            if(typeof node.transform[name] == 'undefined'){
                /*默认值*/
                if(name == 'scale'||name == 'scaleX'||name=='scaleY'){
                    value =1

                }else{
                    value =0
                }

            }else{
                value = node.transform[name] ;

            }
            return value;
        }