js动画封装

js动画封装

凡是可以看到过渡效果的基本都可以用到js动画，都能引用

<!-- 
      ani() 作用：动画  给某个元素查看某个css 属性值 在某个时间中变化的过程。
      el // 元素对象
      str   // css
      end   // 结束动画值
      time  // 动画执行总时间

      返回值为  '1' 表示动画执行完毕
     -->

function $_animation(el, str, end, tm,fn) {
    clearInterval(el.timer);
    // 1：获取初始样式
    var start = getSty(el,str);
    start = parseFloat(start);
    // 2: 求差
    var s = end-start;
    // 3；执行动画
     el.timer = setInterval(function(){
        start += s/tm*16.7; // 每次属性值的变化(例如每次移动距离)
        if(s>0){// end>start 业务
            if(start>=end){
                start = end;
                clearInterval(el.timer);
                el.style[str]=  str==='opacity'?start:start+'px';
                // 执行下一个动画业务从合理
                fn?fn():null; // 判断是否有参数；如果有参数；执行回调函数
                // 强制同步
                flag = true
            }else{
                el.style[str]=  str==='opacity'?start:start+'px';
            }

        }else{
            // 处理end <start 业务
            if(start<=end){
                start = end;
                clearInterval(el.timer);
                el.style[str]=  str==='opacity'?start:start+'px';
                fn?fn():null;
                 // 强制同步
                 flag = true
            }else{
                el.style[str]=  str==='opacity'?start:start+'px';
            }
        }

    },16.7)
  }

  function getSty(el, str) {
    var res;
    if (el.currentStyle) {
      // ie
      res = el.currentStyle[str];
    } else {
      // 非IE
      res = getComputedStyle(el)[str];
    }

    return res;
  }