layer擴展打開/關閉動畫的方法

更新時間：2019年09月23日 11:02:39 作者：BMaru

今天小編就為大家分享一篇layer擴展打開/關閉動畫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1. 打開窗口時，支持自定義或者第三方動畫

打開layer.js，定位到函數：Class.pt.creat ，

找到代碼：

//為兼容jQuery3.0的css動畫影響元素尺寸計算
    if (doms.anim[config.anim]) {
      var animClass = 'layer-anim ' + doms.anim[config.anim];
      that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(animClass);
      });
    }

修改為（此處只是針對css動畫庫animate）：

//為兼容jQuery3.0的css動畫影響元素尺寸計算
    if (doms.anim[config.anim]) {
      var animClass = 'layer-anim ' + doms.anim[config.anim];
      that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(animClass);
      });
    } else {
      //支持自定義的，或者第三方彈出動畫
      var animClass = config.anim;
      var animated = 'animated';
      that.layero.addClass(animated);
      that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(animClass);
        $(this).removeClass(animated);
      });
    }

至此，layer便可支持其他彈出動畫。

2.關閉窗口時，支持自定義或者第三方動畫（layer.open時需傳入新增參數：closeAnim）

打開layer.js

定位到函數：Class.pt.config

新增參數：

closeAnim: 'layer-anim-close',

定位到函數：Class.pt.creat

找到代碼：

    //記錄關閉動畫
    if (config.isOutAnim) {
      that.layero.data('isOutAnim', true);
    }

修改為：

    //記錄關閉動畫
    if (config.isOutAnim) {
      that.layero.data('isOutAnim', true);
      that.layero.data('closeAnim', config.closeAnim);
    }

定位函數到：layer.close

找到代碼：

if (layero.data('isOutAnim')) {
      layero.addClass('layer-anim ' + closeAnim);
    }
 
    $('#layui-layer-moves, #layui-layer-shade' + index).remove();
    layer.ie == 6 && ready.reselect();
    ready.rescollbar(index);
    if (layero.attr('minLeft')) {
      ready.minIndex--;
      ready.minLeft.push(layero.attr('minLeft'));
    }
 
    if ((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')) {
      remove()
    } else {
      setTimeout(function () {
        remove();
      }, 200);
    }

修改為：

if (layero.data('isOutAnim')) {
      if (layero.data("closeAnim") === closeAnim) {
        layero.addClass('layer-anim ' + closeAnim);
      } else {
        layero.addClass(layero.data("closeAnim") + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
          $('#layui-layer-moves, #layui-layer-shade' + index).remove();
          remove();
        });
      }
    }
    if (layero.data("closeAnim") === closeAnim) {
      $('#layui-layer-moves, #layui-layer-shade' + index).remove();
      layer.ie == 6 && ready.reselect();
      ready.rescollbar(index);
      if (layero.attr('minLeft')) {
        ready.minIndex--;
        ready.minLeft.push(layero.attr('minLeft'));
      }
 
      if ((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')) {
        remove()
      } else {
        setTimeout(function () {
          remove();
        }, 200);
      }
    }

好啦，關閉也可以支持第三方動畫啦。

以上這篇layer擴展打開/關閉動畫的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: