DOM动画效果封装

单属性运动框架:

  function move( ele , attr , target){
        // 1. 关闭开启定时器;
        clearInterval( ele.timer );
        ele.timer = setInterval( function(){
                // 2. 计算速度;
                if(attr === "opacity"){
                    var iNow = parseInt(getComputedStyle(ele)[attr] * 100); //0 ~ 100
                }else{
                    var iNow = parseInt(getComputedStyle(ele)[attr]); //100
                }
                var speed = (target - iNow) / 10;
                // 3. 速度取整;
                if(speed > 0){
                      speed = Math.ceil(speed);
                }else{
                      speed = Math.floor(speed);
                }
                if(attr === "opacity"){
                      ele.style[attr] = (iNow + speed) / 100 ;
                }else{
                      ele.style[attr] = iNow + speed + "px";
                }
                // 4. 终止条件;
                if(iNow === target){
                      clearInterval(ele.timer);
                }
            } , 50)
       }