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 核心函数以及jQuery对象
Mar 23 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 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维护文件系统
2006/10/09 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
Python输出9*9乘法表的方法
2015/05/25 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
总经理司机职责
2014/02/02 职场文书
社区活动总结报告
2014/05/05 职场文书
2016春节家属慰问信
2015/03/25 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL