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扩展打开/关闭动画相关推荐

parent.layer.open打开的页面向上个页面传值
平时遇到的传值问题,一般都是父子页面,父页面定义一个全局的方法,类似 functionName = function(){} 然后再子页面就可以通过parent来调用. window.parent.f ...
ios开发——仿新版iBooks书本打开与关闭动画
IOS新版iBooks吸引人的地方除了有干净整洁的界面.方便灵活的操作以及大容量的书籍容量以外,还有其优秀的用户交互,尤其是其动画的使用.打开一本书时书本缓慢放大并打开,关闭一本书后书本关闭并回到原位 ...
Android 书本打开和关闭动画
作者: Jooyer, 时间: 2018.12.08 Github地址,欢迎点赞,fork 我偶尔一次发现掌阅的打开书本动画不错,然后度娘了一下,发现一个链接:download.csdn.net/do ...
开关灯效果HTML,H5+CSS3打开关闭灯泡开关动画特效
H5+CSS3打开关闭灯泡开关动画特效 html, body { font-family: Georgia, serif; font-style: italic; font-size: 4.2vmin ...
自定义Activity的启动关闭动画
那么希望Activity由下面动态进入并展示全屏,设置动画的时候,我们也许想当然认为是从y轴的0到100,那就错了.实际看下图,中间灰色的是手机屏幕.红色是实际的坐标轴. 如果想实现上面,则应该从y轴 ...
WPF:仿WIN7窗体打开关闭效果
WIN7系统里面有很多很炫的动画效果,今天来模仿一下最常见的窗体打开关闭时的动画效果,比如打开一窗体,顶部靠外倾斜,透明渐变显示,关闭窗口,则反之的效果. 先新建一窗体,因为有向前向后倾斜效果,为了省 ...
html弹出窗口加载别的页面地址,仿layer.open打开新窗口URL，自适应URL页面高度
layer.open打开新窗口URL,不能在弹出窗口的同时根据所打开URL地址页面的大小,弹出的同时自适应窗口大小,所以根据需要自己写了一个,请参考指正. 首先加载jquery 下面是js代码: // ...
layert弹出层关于layer.open,打开页面时的用法
layer弹出层,当设置type为2时,引入其他页面中内容. 最近项目里碰到的问题,在父页面用layer.open打开子页面后,从子页面如何调用父页面的方法,从子页面如何关闭父页面中layer弹出层. ...
c语言中关闭文件的作用,【C语言】计算机中的流和文件概述（文件的概念及打开关闭）...
[C语言]计算机中的流和文件概述(文件的概念及打开关闭) [C语言]计算机中的流和文件概述(文件的概念及打开关闭) 目录一.计算机中流二.文件 1.文件的概念 2.文件的分类 3.文件的缓冲区 4 ...

layer扩展打开/关闭动画

layer扩展打开/关闭动画相关推荐

最新文章

热门文章