Encapsulation Method of JavaScript Slow Moving Animation Function

This article example for everyone to share the JavaScript slow animation function encapsulation code, for your reference, the specific content is as follows

This paper will encapsulate the slow motion animation from the following parts (1, single attribute, 2, multiple attributes, 3, callback function of the slow motion frame, 4, hierarchy and transparency of the slow motion frame)

First: Get the compatibility of element styles

function getStyle(ele,attr){      // Object of any type CSS Attribute value of style 
  if(window.getComputedStyle){    
    return window.getComputedStyle(ele,null)[attr];
  }
  return ele.currentStyle[attr];
}

Encapsulate a single attribute

function animate(ele,attr,target){   // Element ( box )   Style ( left )   Target value ( 400 ) 
  clearInterval(ele.timer);     // When using a timer, clear the timer first to prevent multiple timers from paralleling 
  ele.timer = setInterval(function(){
    // Define first 1 Current values 
    var leader = parseInt(getStyle(ele,attr)) || 0;   // When this style is empty, set to 0 The obtained style value is rounded. 
    var step = (target - leader)/10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    leader = leader + step;
    ele.style[attr] = leader + "px";     // Pay attention to setting element style and adding units 
    if(Math.abs(target-leader) <= Math.abs(step)){
      ele.style[attr] = target + "px";
      clearInterval(ele.timer);
    }
  },25);
}

Encapsulate multiple attributes

function animate(ele,json){   // Put the style and target value in the json In, such as: var json = {"left":10,"top":200,"width":300,"height":200}  
  clearInterval(ele.timer);
  ele.timer = setInterval(function(){
    // Open and close principle, the purpose is to ensure that all styles reach the target value 
    var bool = true;
    //  Treat separately json;
    for(k in json){
      var attr = k;  // Here's k That is, the style above 
      var target = json[k];  // Here's json[k] That is, the target value in the above, write it directly after you are proficient k,json[k] . 
      var leader = parseInt(getStyle(ele,attr)) || 0;
      var step = (target - leader) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      ele.style[attr] = leader + "px";

      // If you use the method of clearing the timer above, the 1 A json Content clears the timer , Obviously you can't do this 
      // if(Math.abs(target - leader) <= Math.abs(step)){
        // ele.style[attr] = target + "px";
        // clearInterval(ele.timer);
      // }
      if(target !== leader){  // According to the above definition bool , traversal json When there is 1 Styles are not completed, then bool The value is still false . 
        bool = false;
      }
    }

    // Only when all attribute styles are in the specified position, bool Value becomes true
    if(bool){  
      clearInterval(ele.timer);
    }
  },25);       
}

Callback function of slow-moving frame

function animate(ele,json,fn){
    clearInterval(ele.timer);
    ele.timer = setInterval(function(){
        var bool = true;
        for(k in json){       
            var leader = parseInt(getStyle(ele,k)) || 0;  
            var step = (json[k] - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            ele.style[k] = leader + "px";
            if(json[k] !== leader){
                bool = false;
            }
        }
        if(bool){
            clearInterval(ele.timer);
            if(fn){     // If there is a function here, it will be used. If there is no function, it will not be executed automatically. Of course, a judgment can also be added. if ( typeof fn == "function"), When fn When the type is a function. 
                fn();
            }
        }
    },25);
}

// Call 
animate(box,json,function(){      // Here's function Yes 1 The whole function body, so the above fn To add ();
    animate(box,json1,function(){     // When the execution of the 1 When there is a slow animation, there are function Execution continues. 
        animate(box,json);
    });
});

Hierarchy and transparency of slow-moving frame

function animate(ele,json,fn){
  clearInterval(ele.timer);
  ele.timer = setInterval(function(){
    var bool = true;
    for(k in json){
      var leader;
      if(k === "opacity"){   // If the property is opacity
        leader = getStyle(ele,k) * 100 || 1;  // You can't round it, multiply it first 100
      }else{
        leader = parseInt(getStyle(ele,k)) || 0;  
      }          
      var step = (json[k] - leader) / 10; 
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      if(k === "opacity"){ 
        ele.style[k] = leader/100;   // If it is opacity When assigned, divide by 100
        ele.style.filter = "alpha(opacity="+leader+")";   // Compatible IE
      }else if(k === "zIndex"){
        ele.style[k] = leader;   // Just assign it directly, without adding units 
      }else{
        ele.style[k] = leader + "px";
      }
      if(json[k] !== leader){
        bool = false;
        console.log(leader);
      }
    }
    if(bool){
      clearInterval(ele.timer);
      if(fn){
        fn();
      }
    }
  },30);
}
**// Note that the value assigned here opacity To multiply by 100 , such as: 30 , 100 Etc **