layer如何打开/关闭动画-创新互联

小编给大家分享一下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如何打开/关闭动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。