遮罩层必须用 fixed 定位覆盖整个视口，配合 top/right/bottom/left: 0 和合理 z-index；内容居中需 absolute + transform: translate(-50%,-50%)；动画应启用硬件加速；显隐控制用 visibility+opacity 过渡而非 display:none。
遮罩层必须用 fixed 定位且覆盖整个视口
遮罩层的核心是视觉阻断，不能依赖父容器高度或滚动位置。用 position: fixed 是唯一可靠方式，否则在滚动页面时遮罩会“掉”出可视区。常见错误是误用 absolute 或忘记设 top/right/bottom/left: 0。
SCSS 混合宏里要强制锁定这四边：
@mixin loading-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}注意 z-index 值不是固定写死的万能解——如果项目已有全局弹窗层级体系（比如 $z-modal: 1000），应改用 z-index: $z-modal + 1，避免跨项目复用时被遮挡。
遮罩内容居中需要脱离文档流+坐标偏移
纯靠 text-align: center 或 margin: auto 对 fixed 元素无效。正确做法是让子元素也 position: absolute，再用 transform: translate(-50%, -50%) 居中——这是目前最稳定、无需知道宽高的方案。
立即学习“前端免费学习笔记（深入）”；
混合宏可扩展为带内容容器的版本：
@mixin loading-overlay-with-content {
@include loading-overlay;
<p>&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}</p><blockquote><ul><li>{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}这里用了 &::before 伪元素实现半透明背景，避免多套一层 HTML 标签；> * 确保只居中直接子元素，防止内部结构被意外影响。
动画卡顿常因未启用硬件加速
加载图标（如旋转 spinner）如果只用 animation: spin 1s infinite，在低端设备或长列表页容易掉帧。关键是要触发 GPU 渲染：
- 给动画元素加
transform: translateZ(0)或will-change: transform - 避免对
width/height/top/left做动画——这些触发布局重排 - SCSS 中可封装一个轻量动画 mixin：
@mixin spin-loader { animation: spin 0.8s linear infinite; transform: translateZ(0); <p>@keyframes spin { to { transform: rotate(360deg) translateZ(0); } } }
显示/隐藏控制必须用 class 切换而非 display: none
直接写 display: none 会让遮罩层完全脱离渲染树，后续再 show 时会触发重排+重绘，尤其在频繁开关场景（如按钮连续点击）下明显卡顿。应该用 visibility: hidden + opacity: 0 配合 transition 控制淡入淡出。
推荐状态 class 命名规范：
-
.loading-overlay：基础样式（fixed、z-index、背景等） -
.loading-overlay--active：激活态（visibility: visible; opacity: 1;） -
.loading-overlay--inactive：隐藏态（visibility: hidden; opacity: 0;），并加transition: opacity 0.2s ease
这样 JS 只需切换 class，CSS 负责过渡和性能优化，不耦合逻辑。
真正难的是遮罩与业务状态的同步时机——比如接口 error 后要立刻 hide，但 response time 不确定；这时候别在 CSS 里做判断，让 JS 控制 class 的增删节奏，CSS 只管“怎么动”，不管“什么时候动”。
