动画函数的简单封装

/**
 * 动画函数
 * @param {node} ele 要运动的元素
 * @param {object} obj 要运动的属性组成的对象
 */
function move(ele,obj,fn){
    var k = 0
    var n = 0
    // 遍历对象，在循环中创建定时器
    for(let attr in obj){
        k++
        // 在循环中执行异步代码，所以要将循环的var换成let
        let timerId = setInterval(function(){
            var target = obj[attr]
            
            // 让left、top、width ... 通用
            var style = getStyle(ele,attr) // 获取到的属性是 XXpx
            if(attr === 'opacity'){
                style *= 100
                target *= 100
            }
            // 取整
            style = parseInt(style)
            // 增加
            // 计算运动的速度
            // 求出距离目的地还有多远
            var diff = target - style;
            // 不论远近，都按照一定的比例去运动
            // 求比例
            var speed = diff/20
            // 这样走，距离目的地越来越近，但是走的也越来越小，永远到不了目的地
            // speed = Math.ceil(speed)
            if(speed>0){
                speed = Math.ceil(speed)
            }else{
                speed = Math.floor(speed)
            }
            style += speed
            // 做判断
            if(style === target){
                style = target
                if(attr === 'opacity'){
                    ele.style[attr] = style/100
                }else{
                    ele.style[attr] = style  +"px"
                }
                // 清除定时器
                clearInterval(timerId)
                n++
                // 当n和k相等的时候就表示所有运动都结束了
                if(k === n){
                    // console.log("所有运动都结束了");
                    // 运动结束之后我们要执行的代码不确定
                    // 调用函数就好
                    fn()
                }
            }else{
                if(attr === 'opacity'){
                    ele.style[attr] = style/100
                }else{
                    ele.style[attr] = style  +"px"
                }
            }
        },20)
    }
}