js缓冲运动的封装

这是一个封装了的缓冲运动的方法，便于以后多次调用，希望能帮到大家，一起努力！！！。

//方法封装 可以给透明度 层级等不需要去除px的进行缓冲变化
    function animated(element, targetObject, callback, speed) { //element 变化的元素  传入目标对象 targetObject callback 回调函数
        clearInterval(element.timer)
            //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
        if (typeof speed != 'number') {
            speed = Number(speed)
            if (isNaN(speed)) {
                speed = 0
            }
        }
        element.timer = setInterval(() => {
                let flag = true
                for (let key in targetObject) {
                    let current = parseFloat(getStyle(element, key))
                    let step = 0
                        //判断传进来的值
                    if (key == "opacity") {
                        //不需要px作为单位
                        //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长 
                        step = (targetObject[key] * 100 - current * 100) / 10 //保证最终达到1  
                        step = (step > 0 ? Math.ceil(step) : Math.floor(step)) / 100
                        element.style[key] = current + step
                    }
                    if (key == "zIndex") { //如果是层高 直接设置
                        element.style[key] = targetObject[key]
                    }
                    if (key != "opacity" && key != "zIndex") { //height width left top
                        step = (targetObject[key] - current) / 10 > 0 ? Math.ceil((targetObject[key] - current) / 10) : Math.floor((targetObject[key] - current) / 10)
                        element.style[key] = current + step + 'px'
                    }
                    if (Math.abs(targetObject[key] - current) > Math.abs(step)) { //如果某个没有设置完
                        flag = false
                    }
                }
                if (flag) {
                    clearInterval(element.timer)
                        //执行对应的callback
                    if (typeof callback == 'function') { //如果你是个函数
                        //执行这个函数
                        callback()
                    }
                }
            }, speed)
            //callback是所有的这个函数里面所有的事情做完以后做的事情
    }
    //获取样式的值
    function getStyle(element, attr) { //需要获取样式的对象  样式的名字
        // window.getComputedStyle(element,null)[attr]
        // element.currentStyle ie的兼容写法
        //获取样式对象
        var style = window.getComputedStyle ? window.getComputedStyle(element, null) : element.currentStyle
        return style[attr]
    }