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如何打开/关闭动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！