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扩展打开/关闭动画的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
layer,扩展打开,关闭动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“layer扩展打开/关闭动画的方法”评论...
更新动态
2025年11月05日
2025年11月05日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]