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 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
es6中let和const的使用方法详解
Feb 24 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
用header 发送cookie的php代码
2007/03/16 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
分享PHP header函数使用教程
2013/09/05 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
js处理表格对table进行修饰
2014/05/26 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JS表的模拟方法
2015/02/05 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
优秀团支部事迹材料
2014/02/08 职场文书
党员四风剖析材料
2014/08/27 职场文书
工程技术员岗位职责
2015/04/11 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang