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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
Highcharts入门之简介
Aug 02 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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断点续传之如何分割合并文件
2014/03/22 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python uuid模块使用实例
2015/04/08 Python
解析Python中的二进制位运算符
2015/05/13 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
护士求职推荐信范文
2013/11/23 职场文书
自我评价的写作规则
2014/01/06 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
素质教育标语
2014/06/27 职场文书
大学生村官个人总结
2015/02/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python