layui弹窗需用css transition实现淡出动画：先给弹层添加layer-fade-out类，再通过opacity和visibility配合transition控制动画，最后监听一次transitionend事件调用layer.close()；同时需禁用默认关闭按钮并手动处理关闭逻辑。
要让Layui弹窗在关闭时呈现可控的淡出动画效果，不能依赖layer.close()直接销毁——它会同步移除DOM，根本没机会渲染CSS过渡。
用CSS transition接管关闭流程
第一步：给弹层容器添加自定义class用于触发动画
在layer.open()返回后，手动获取弹层最外层wrapper元素，添加一个如layer-fade-out的class：
const index = layer.open({ content: '内容', area: ['400px', '200px'] });
const $wrapper = $('.layui-layer').last();
$wrapper.addClass('layer-fade-out');
第二步：写对应的CSS过渡规则
必须同时控制opacity和visibility，否则会出现点击空白处闪退或无法触发transitionend的问题：
style type="text/css"
.layer-fade-out {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.3s ease, visibility 0.3s step-end;
}
第三步：监听transitionend事件再真正关闭
关键点在于只监听一次，且必须等动画完成后再调layer.close(index)，否则动画中断：
$wrapper.one('transitionend', function() {
layer.close(index);
});
注意：【不能用$wrapper.on('transitionend', ...)】——重复绑定会导致多次关闭；也不能省略.one()直接用.on()。
防止用户提前关闭导致定时器残留
方法一：在yes/cancel/右上角关闭回调中主动清除可能存在的过渡监听
layer.open({
content: '确认操作？',
btn: ['确定', '取消'],
yes: function(index) {
$('.layui-layer').last().removeClass('layer-fade-out').addClass('layer-fade-out');
$('.layui-layer').last().one('transitionend', function() {
layer.close(index);
});
},
cancel: function(index) {
$('.layui-layer').last().removeClass('layer-fade-out').addClass('layer-fade-out');
$('.layui-layer').last().one('transitionend', function() {
layer.close(index);
});
}
});
方法二：用setTimeout兜底，避免transitionend未触发时弹层卡住
这一步操作起来很简单，直接在加完class后启动一个稍长于CSS transition时间的setTimeout：
const $wrapper = $('.layui-layer').last();
$wrapper.addClass('layer-fade-out');
$wrapper.one('transitionend', () => layer.close(index));
setTimeout(() => layer.close(index), 350);
禁用默认关闭按钮并替换为自定义触发逻辑
layer.open()中设置closeBtn: 0可隐藏右上角×，然后在content里插入自定义关闭按钮：
layer.open({
content: '
closeBtn: 0
});
再绑定点击事件，走完整淡出流程：
document.querySelector('.my-layer .close-btn').onclick = function() {
const $wrapper = $('.layui-layer').last();
$wrapper.addClass('layer-fade-out');
$wrapper.one('transitionend', () => layer.close(index));
};
