layer扩展打开/关闭动画的方法


Posted in Javascript onSeptember 23, 2019

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扩展打开/关闭动画的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现滑动特效代码
Aug 10 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
jquery中键盘事件小结
Feb 24 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 #Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 #Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 #Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 #Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 #Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 #Javascript
微信小程序如何获取用户头像和昵称
Sep 23 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python实现Linux监控的方法
2019/05/16 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
研发工程师的岗位职责
2013/11/18 职场文书
农村党支部先进事迹
2014/01/14 职场文书
外贸专业求职信
2014/03/09 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2014全年工作总结
2014/11/27 职场文书
个园导游词
2015/02/04 职场文书
党小组推荐意见
2015/06/02 职场文书
周一问候语大全
2015/11/10 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
MySQL的存储过程和相关函数
2022/04/26 MySQL