运动函数

function move(ele,obj,cb){//元素，对象；怎么运动的， 运动完后发生的事

    let timerObj = {}; // 将所有定时器都放到这个对象中

    for(let attr in obj){ // 为了不让后面的定时器覆盖前面的，将var改为let

        let target = obj[attr]; // 为了多个属性不产生错误，将var改为let

        // 获取当前样式

        let currentStyle = window.getComputedStyle(ele)[attr]; // 为了能让多属性均匀，将var改为let

        // 当attr是透明度的时候，当前样式应该转为浮点数，并*100，因为传进来的目标是*100的

        if(attr == 'opacity'){

            currentStyle = parseFloat(currentStyle)*100;

            // 传进来的目标缩小了100倍，所以这里再扩大100倍

            target = target * 100;

        }else{

            // 获取到的是字符串，转为数字

            currentStyle = parseInt(currentStyle);

        }

        // 设置定时器，让当前样式每隔20毫秒增加5px

        // 通过每个css属性来识别这个定时器

        timerObj[attr] = setInterval(function(){ // 为了能将所有定时器都结束掉，将var改为let

            // 计算比例

            let percent = (target - currentStyle)/10;

            // 为了能让定时器停止，需要处理比例

            if(percent>0){

                percent = Math.ceil(percent); // 向右运动

            }else{

                percent = Math.floor(percent); // 向左运动

            }

            // 当前样式不能都加5，否则不均与，所以加上比例

            currentStyle += percent;

            // 判断增加后的样式是否到达指定距离

            if(currentStyle == target){ // 

                // 清除定时器

                clearInterval(timerObj[attr]);

                // 每次结束一个定时器将这个定时器从定时器对象中删掉

                delete timerObj[attr];

                // 每次删掉定时器后，遍历定时器对象，计算定时器对象中定时器的个数.

                let k=0;

                for(let i in timerObj){

                    k++;

                }

                // 如果个数是0，表示所有定时器都删掉了，也就意味着所有属性的运动都结束了

                if(k==0){

                    // console.log("运动结束了");

                    // 当运动结束后想要做的事情，可以调用一个函数

                    cb(); // 这个函数需要当做参数传进来

                }

            }else{

                // 样式属性是透明度的时候，最后的值应该/100，并且不需要 px单位

                if(attr == 'opacity'){

                    ele.style[attr] = currentStyle/100;

                }else{

                    // 将增加后的样式重新设置到元素上

                    ele.style[attr] = currentStyle + 'px';

                }

            }

        },20);

    }}