遮罩层必须用position: fixed+top:0+left:0+width:100vw+height:100vh，禁用absolute或100%；z-index≥9999；动画仅用opacity和transform；移动端需touch-action:none+body overflow:hidden。
遮罩层必须用 fixed 定位且覆盖整个视口
很多初学者用 position: absolute 或直接设 width: 100%，结果滚动时遮罩消失、内容露出。真正可靠的写法是：position: fixed + top: 0 + left: 0 + width: 100vw + height: 100vh。注意别用 100%，它依赖父容器高度，在 body 未撑满时会失效。
常见错误现象：z-index 不生效、遮罩只盖住首屏、刷新后闪一下才出现。
- 确保遮罩的
z-index高于所有业务元素（建议 ≥ 9999） - 给
html, body加height: 100%，避免vh计算异常（尤其 Safari） - 遮罩元素应放在
<body>最顶部，不嵌套在任何组件容器内
动画要用 CSS @keyframes + opacity + transform
用 display: none/block 切换会导致重排，动画卡顿；纯 opacity 淡入淡出又没“缩放”或“旋转”感。推荐组合：透明度变化 + scale(0.95) → scale(1)，视觉更自然。
性能关键点：只对 opacity 和 transform 做动画，这两项能走 GPU 合成，不会触发 Layout/Paint。
立即学习“前端免费学习笔记（深入）”；
- 避免在动画中修改
width、height、margin等触发布局的属性 - 加
will-change: opacity, transform可提前提示浏览器优化（但不要滥用） - 动画时长控制在 250–350ms，太短用户感知不到，太长显得卡
@keyframes loader-fade-in {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
.loader-overlay {
animation: loader-fade-in 0.3s ease-out forwards;
}
JS 控制显示/隐藏要防重复触发和竞态
用户快速点击按钮、接口并发请求、路由跳转频繁时，容易出现遮罩没关掉、或刚关又立刻打开。核心是：用一个状态变量锁住，且隐藏操作加防抖或 Promise 链绑定。
典型错误：showLoader() 被连点三次，hideLoader() 却只调一次，导致遮罩残留。
- 维护一个
isLoaderActive标志位，每次 show 前先检查 - hide 操作不要直接删 DOM，而是加 class 触发退出动画，动画结束再移除节点（监听
animationend） - 如果配合 fetch，应在
finally块里 hide，而非仅在then或catch中
let isLoaderActive = false;
function showLoader() {
if (isLoaderActive) return;
document.body.appendChild(loaderEl);
loaderEl.classList.add('active');
isLoaderActive = true;
}
function hideLoader() {
if (!isLoaderActive) return;
loaderEl.classList.remove('active');
loaderEl.addEventListener('animationend', () => {
loaderEl.remove();
isLoaderActive = false;
}, { once: true });
}
移动端需额外处理 touch-action 和滚动穿透
iOS Safari 下，遮罩层默认允许底层页面滚动，手指一滑就穿过去了。这不是 bug，是浏览器为可访问性保留的默认行为。
解决方式不是禁用 touchmove（会破坏体验），而是用标准 CSS 属性压制：
- 给遮罩层加
touch-action: none，阻止默认手势传递 - 同时给
body加overflow: hidden，但注意：这会导致滚动位置丢失，切回页面时需手动恢复scrollTop - 若遮罩只是短暂加载（overflow: hidden，只靠
touch-action就够用
兼容性提醒：touch-action 在 Android Chrome 36+、iOS Safari 13.4+ 支持良好，老版本需降级 fallback。
