layui.close()无法触发关闭动画是因为其同步销毁DOM，无渲染时间；正确做法是先加退出class触发动画，再于transitionend事件中调用layer.close(index)，并辅以setTimeout兜底。
layui.close() 无法直接触发关闭动画的原因
layui 的 layer.close() 是同步销毁 dom 的操作，调用后弹层立即从页面移除，没有留出执行 css 动画的时间窗口。你写在 end 回调里的动画代码（比如加 class、改 opacity）根本没机会被浏览器渲染——dom 已经没了。
用 layer.closeAll() 或 layer.close() 配合 setTimeout 延迟销毁
核心思路是：先手动触发动画，等动画结束（CSS transition 完成）再真正调用 layer.close()。关键不是“监听关闭”，而是“接管关闭流程”。
常见做法是给弹层容器加一个退出 class，配合 CSS 过渡，然后在 transitionend 后调用 layer.close()：
const index = layer.open({
content: '<div class="my-layer">内容</div>',
// 其他配置...
});
// 点击关闭按钮时（或其它触发时机）
document.querySelector('.my-layer .close-btn').onclick = function() {
const $layer = $('.layui-layer-content').parent(); // 获取整个弹层 wrapper
$layer.addClass('layer-exit'); // 触发退出动画
$layer.one('transitionend', function() {
layer.close(index); // 动画结束后才真正关闭
});
};
CSS 示例：
.layui-layer-content .my-layer {
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.layer-exit .my-layer {
transform: scale(0.95);
opacity: 0;
}
-
layer.close()必须放在transitionend里，不能用setTimeout硬等时间——不同设备、不同动画时长下容易失步 - 确保
.layer-exit作用到能触发 transition 的元素上（通常是.layui-layer或其子容器），而不是只加在content内部 - 如果弹层有遮罩（
shade），遮罩默认会随弹层同步消失；若要让遮罩也带动画，需单独控制.layui-layer-shade
layer.config() 中的 end 回调不是动画入口点
end 是弹层 DOM 被完全移除后的回调，此时元素已从 document 中 detach，无法再添加 class 或读取 computedStyle。很多人误以为在这里操作样式能“回放动画”，实际无效。
正确做法始终是：在调用 layer.close() 之前 启动动画，并用事件驱动销毁。
- 不要在
end里尝试$().addClass()或animate()—— 元素已不存在 - 如果必须复用
end，只能做纯逻辑清理（如清空定时器、重置状态变量），不能操作 DOM - 多个弹层共存时，注意
transitionend可能被子元素冒泡触发，建议用e.target === $layer[0]做校验
移动端 touch 事件下 transitionend 触发不稳定
部分 Android WebView 或 iOS Safari 在快速连续关闭时，transitionend 可能不触发或延迟触发，导致弹层卡住不销毁。
稳妥方案是加 fallback：
$layer.one('transitionend', function(e) {
if (e.target === $layer[0]) {
layer.close(index);
}
});
// 1 秒后强制关闭（兜底）
setTimeout(() => {
if ($layer.is(':visible')) {
layer.close(index);
}
}, 1000);
这个 timeout 不是主力方案，只是防止极端情况下的挂起。真实项目中建议把动画时长统一控制在 300ms 以内，并避免在动画过程中频繁 toggle class。
真正难的不是写动画，而是让销毁时机和渲染帧对齐——浏览器 repaint 和 DOM 生命周期之间那几十毫秒，得靠 transitionend 抓准，而不是靠猜。
