layui layer实现纯淡入淡出效果需禁用缩放：设anim:5并用!important清除transform；或用anim:-1配合success回调fadeTo；遮罩层须手动创建与销毁以解耦动画。
要让 layui layer 弹窗呈现柔和的淡入淡出效果，不能只依赖 anim 参数——因为 anim:5 是纯渐显（无位移），但默认仍带轻微缩放；而真正的“纯透明过渡”需绕过 layer 内置动画逻辑，用 CSS 覆盖 + shade 配合控制。
用 anim:5 + 自定义 CSS 彻底禁用缩放，只保留透明变化
第一步：在 layer.open 中设置 anim: 5，并关闭所有位移类影响：
layer.open({
content: '操作成功',
anim: 5,
shade: 0.3,
skin: 'layer-fade-only'
});
第二步：在页面样式中添加覆盖规则，清除 layer-anim-fade 的 transform 干扰：
/* 必须加 !important，否则 layer 内联样式会覆盖 */
.layer-fade-only .layui-layer-content {
animation: none !important;
}
.layer-fade-only .layui-layer {
transform: none !important;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.layer-fade-only.layui-layer-show {
opacity: 1;
}
这一步关键在于【必须用 !important 强制清除 layer 自动注入的 transform】，否则 anim:5 仍会触发 scale(1.05)→scale(1) 的缩放过程，达不到“纯淡入”观感。
用 success 回调接管，实现精准 fade 动画
方法一：直接操作 layero 的 opacity（最轻量）
layer.open({
content: '加载中...',
anim: -1, // 关闭内置动画
shade: 0.2,
success: function(layero) {
$(layero).css({ opacity: 0, display: 'block' });
$(layero).stop().fadeTo(300, 1);
}
});
方法二：用 CSS keyframes 实现更可控的 fade（推荐用于需复用场景）
先定义动画：
@keyframes layer-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.layer-custom-fade .layui-layer {
animation: layer-fade .25s ease-in forwards;
}
再调用：
layer.open({
content: '已保存',
anim: -1,
skin: 'layer-custom-fade',
shade: 0.15
});
针对遮罩层（shade）单独控制淡入淡出节奏
第一步：把 shade 设为 false，手动创建独立遮罩 DOM
第二步：在 success 中插入并动画化遮罩：
success: function(layero, index) {
var shade = $('
')
.css({
background: 'rgba(0,0,0,.3)',
position: 'fixed',
top: 0, left: 0, right: 0, bottom: 0,
opacity: 0
})
.appendTo('body')
.fadeTo(200, 0.3);
// 同时给弹层本体加 fade
$(layero).css('opacity', 0).fadeTo(250, 1);
}
第三步：监听 layer 关闭事件，同步收起遮罩：
cancel: function() {
$('.my-shade').fadeOut(150, function() { $(this).remove(); });
},
end: function() {
$('.my-shade').remove();
}
这一步【必须手动管理遮罩生命周期，否则多次打开会叠加多个 .my-shade】，且不能依赖 layer 自带 shade，因为它的淡入淡出与 anim 绑定，无法解耦。
