layer.open 默认不支持自定义动画字符串(如'fadeinup'),因其 anim 参数仅校验内置数字编号,传入字符串会被忽略导致无动画;需修改源码增加字符串动画支持并绑定 animationend 清理 class,或用 success 回调手动添加/移除动画类。
layer.open 默认只支持内置的 0–6 号 css 动画,要加自定义入场动画(比如 animate.css 的 fadeinup 或自定义 @keyframes),必须改源码或绕过内置逻辑——直接传入 class 名并手动处理动画结束事件。
为什么直接设 anim: 'fadeInUp' 不生效
layer 内部对 anim 值做了白名单校验:doms.anim[config.anim] 只认内置映射(如 anim: 1 → layer-anim-fadein)。传字符串如 'fadeInUp' 会被忽略,退化为无动画。
- 现象:弹窗瞬间闪出,控制台无报错,
layero上没加任何动画 class - 根本原因:源码里
if (doms.anim[config.anim]) { ... }分支不进入,后续没 fallback 逻辑 - 兼容性影响:jQuery 3.0+ 下若强行加 class 但不清理,可能因
animationend未触发导致 class 残留,影响后续打开
修改 layer.js 的 Class.pt.creat 函数(推荐稳定方案)
定位到 Class.pt.creat 中处理动画的代码块(关键词 “webkitAnimationEnd”),将原逻辑扩写为支持字符串动画名:
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 if (typeof config.anim === 'string' && config.anim) {
// 支持传入 animate.css 类名或自定义 keyframes 名
var animClass = config.anim;
that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass(animClass);
});
}
- 必须保留
.one(...)绑定,否则动画 class 残留,多次打开会叠加 class - 不要加
animated这类前缀——animate.css v4+ 已废弃该 class,v3 需自行判断版本 - 若用 CSS-in-JS 或动态插入 style,确保样式已加载完成再调
layer.open,否则动画不触发
不改源码的临时 workaround(适合测试或无法动 JS 文件时)
在 success 回调或 layer.ready 后手动加 class 并监听:
layer.open({
type: 1,
content: '<div>hello</div>',
anim: -1, // 关闭默认动画
success: function(layero) {
layero.addClass('animate__fadeInUp').addClass('animate__animated');
layero.one('animationend', function() {
layero.removeClass('animate__fadeInUp animate__animated');
});
}
});
- 依赖外部动画库(如 Animate.css)时,必须提前引入且确保 class 名匹配(v4 是
animate__*,v3 是animated *) -
success是唯一能拿到真实layeroDOM 节点的时机,zIndex、offset等已计算完毕 - 此法无法用于
type: 2(iframe)的子页面内动画,因为 iframe 内容加载异步,success触发时 iframe 可能尚未 ready
真正麻烦的不是加动画,而是动画结束后必须立刻移除 class —— 否则下一次打开时,浏览器可能跳过重绘,导致动画失效或布局错乱。这个清理动作一旦漏掉,问题会藏得非常深。











