运动的封装

以下是运动的简单封装
带有px的css属性和透明度，可以运动
背景色不可以

// 参数2被修改成了对象，那么在使用之前需要解析（遍历）
function move(ele,obj,cb){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        // 假设状态为：可以清除计时器
        var i = true;
        // 因为在计时器中才开始使用到对象中的信息，所以在计时器中遍历
        // 并提前换来的属性和目标变量
        for(var attr in obj){
            if(attr == "opacity"){
                var iNow = getStyle(ele,attr) * 100;
            }else{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            let speed = (obj[attr] - iNow)/10;
            speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
            // 只要有一个属性到目标，就停了，不对
            // 必须所有属性到目标，才能停

            // 只要有一个属性没到目标，绝对不能停
                // 用状态来标记到底要不要停止计时器

            // 只要有一个属性没到目标：绝对不能清除计时器
            if(iNow !== obj[attr]){
                i = false;
            }
            if(attr == "opacity"){
                ele.style.opacity = (iNow + speed)/100;
            }else{
                ele.style[attr] = iNow + speed + "px";
            }
        }
        // 如果每次计时器执行结束，所有属性都执行了一遍之后，状态还是true，表示，没有被改成false，如果没有被改成false，表示没有属性没到终点，那么状态还是false就不清除
        if(i){
            clearInterval(ele.t);
            // 用户决定在动画结束时要执行的功能，万一用户没传参，做个默认判断
            if(cb){
                cb();
            }
            // cb && cb();
        }
    }, 30);
}

function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

进行简单运动时 ，将上述引进可以快速解决，同时避免了重复代码，能够有效提高效率