requestAnimationFrame實現(xiàn)jquery上拉下拉動畫

使用requestAnimationFrame代替setInterval和setTimeout

優(yōu)勢與特點：

1)requestAnimationFrame會把每一幀中的所有DOM操作集中起來淑际，在一次重繪或回流中就完成满败，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率

2)在隱藏或不可見的元素中鳄乏，requestAnimationFrame將不會進行重繪或回流爽篷，這當(dāng)然就意味著更少的CPU魄揉、GPU和內(nèi)存使用量

3)requestAnimationFrame是由瀏覽器專門為動畫提供的API桶癣，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用焚鲜，并且如果頁面不是激活狀態(tài)下的話紊册，動畫會自動暫停，有效節(jié)省了CPU開銷

jquery slideToggle函數(shù)接受兩個參數(shù)男翰，第一個參數(shù)代表動畫時間另患，第二個為回調(diào)函數(shù)
本代碼實現(xiàn)的slideToggle函數(shù)接受三個參數(shù)，第一個參數(shù)為操作的dom元素蛾绎，第二個代表動畫時間昆箕，單位ms，第三個為動畫結(jié)束時的回調(diào)函數(shù)

原生實現(xiàn)slideToggle租冠，代碼如下：

/**
 * 獲取元素實際樣式值
 * @param el dom元素
 * @param styleName 樣式名
 */
function getStyle(el, styleName) {
  if (el.currentStyle) return el.currentStyle[styleName];
  if (getComputedStyle) return window.getComputedStyle(el, null)[styleName];
  return el.style[styleName];
}

// 優(yōu)雅降級requestAnimationFrame
const requestAnimationF = (function () {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    // if all else fails, use setTimeout
    function (callback) {
      return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
    };
})();

// 優(yōu)雅降級cancelAnimationFrame
const cancelAnimationF = (function () {
  return window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.oCancelAnimationFrame ||
    function (id) {
      window.clearTimeout(id);
    };
})();


/**
 * 獲取元素實際高度
 * @param el  dom元素
 * @returns {number} 元素高度
 */
function getHeight(el) {
  let height;
  // 已隱藏的元素
  if (getStyle(el, "display") === "none") {
    el.style.position = "absolute";
    el.style.visibility = "hidden";
    el.style.display = "block";
    height = getStyle(el, "height");
    el.style.position = "";
    el.style.visibility = "";
    el.style.display = "";
    return parseFloat(height);
  }
  return parseFloat(getStyle(el, "height"));
}

/**
 * 獲取已隱藏元素的css值
 * @param el
 * @param styleName
 * @returns {*}
 */
function getCurrentStyle(el, styleName) {
  let styleValue;
  // 已隱藏的元素
  if (getStyle(el, "display") === "none") {
    el.style.position = "absolute";
    el.style.visibility = "hidden";
    el.style.display = "block";
    styleValue = getStyle(el, styleName);
    el.style.position = "";
    el.style.visibility = "";
    el.style.display = "";
    return (styleValue);
  }
  return (getStyle(el, styleName));
}

/**
 * 優(yōu)化實現(xiàn)sildeToggle效果
 * @param el dom元素
 * @param time 動畫時長鹏倘，單位ms，默認值300
 * @param fn 回調(diào)函數(shù)
 */
function slideToggle(el, time, fn) {
  if (!el) return false;
  time = time || 300;
  if (el.dataUid) return false; // 如該dom元素已有動畫未處理完顽爹，則必須等到動畫結(jié)束才執(zhí)行

  cancelAnimationF(el.dataUid);

  // 已隱藏的元素纤泵，下拉
  if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
    let aniSplitTime = Date.now();

    let height = 0, paddingTop = 0, paddingBottom = 0;
    let totalHeight = parseFloat(getCurrentStyle(el, "height"));
    let totalPaddingTop = parseFloat(getCurrentStyle(el, "paddingTop"));
    let totalPaddingBottom = parseFloat(getCurrentStyle(el, "paddingBottom"));

    let basePaddingBottom = totalPaddingBottom/time;
    let basePaddingTop = totalPaddingBottom/time;
    let baseHeight = totalHeight/time;

    el.style.overflow = "hidden";
    el.style.display = "block";

    el.dataUid = requestAnimationF(function go(){
      let aniTime = Date.now();
      let splitTime = aniTime - aniSplitTime;
      aniSplitTime = aniTime;
      let splitPaddingBottom = basePaddingBottom*splitTime;
      let splitPaddingTop = basePaddingTop*splitTime;
      let splitHeight = baseHeight*splitTime;

      if (height >= totalHeight){
        el.style.overflow = "";
        el.style.height = "";
        el.style.paddingTop = "";
        el.style.paddingBottom = "";

        if (fn && typeof fn === "function") fn();
        cancelAnimationF(el.dataUid);
        el.dataUid = null;
        delete el.dataUid;
      } else {
        el.style.height = height + "px";
        el.style.paddingTop = paddingTop + "px";
        el.style.paddingBottom = paddingBottom + "px";
        el.dataUid = requestAnimationF(go);
      }
      height = height + splitHeight;
      paddingTop = paddingTop + splitPaddingTop;
      paddingBottom = paddingBottom + splitPaddingBottom;
    });

  } else {
    // 上拉
    let aniSplitTime = Date.now();
    let height = getHeight(el);
    let paddingTop = parseFloat(getStyle(el, "paddingTop"));
    let paddingBottom = parseFloat(getStyle(el, "paddingBottom"));
    el.style.overflow = "hidden";

    let basePaddingBottom = paddingBottom/time;
    let basePaddingTop = paddingTop/time;
    let baseHeight = height/time;

    el.dataUid = requestAnimationF(function go(){
      let aniTime = Date.now();
      let splitTime = aniTime - aniSplitTime;
      aniSplitTime = aniTime;
      let splitPaddingBottom = basePaddingBottom*splitTime;
      let splitPaddingTop = basePaddingTop*splitTime;
      let splitHeight = baseHeight*splitTime;

      if (height <= 0) {
        el.style.height = 0;
        el.style.paddingTop = 0;
        el.style.paddingBottom = 0;
    
        setTimeout(()=>{
          el.style.height = "";
          el.style.overflow = "";
          el.style.paddingTop = "";
          el.style.paddingBottom = "";
          el.style.display = "none";
        },0);

        if (fn && typeof fn === "function") fn();
        cancelAnimationF(el.dataUid);
        el.dataUid = null;
        delete el.dataUid;
      } else {
        el.style.height = height + "px";
        el.style.paddingTop = paddingTop + "px";
        el.style.paddingBottom = paddingBottom + "px";
        el.dataUid = requestAnimationF(go);
      }

      height = height - splitHeight;
      paddingBottom = paddingBottom - splitPaddingBottom;
      paddingTop = paddingTop - splitPaddingTop;
    });
  }
}