全屏遮罩淡入淡出需用class切换触发CSS过渡：.overlay{opacity:0;visibility:hidden;transition:visibility 0.1s,opacity 0.3s}，.overlay.show{opacity:1;visibility:visible}，监听transitionend时仅响应opacity变化，并配合position:fixed、100vw/vh及pointer-events控制。
用 HTML 按钮控制全屏遮罩层的淡入淡出，核心不是写 JS 逻辑，而是确保 CSS 动画可触发、可中断、可收尾——按钮只负责 toggle class，其余全交给 visibility + opacity + transition 配合 transitionend 事件。
button.onclick 必须操作 class，不能直接改 style.opacity
直接写 el.style.opacity = '1' 会导致浏览器跳过中间帧，“一闪就满”，尤其在快速连点时。class 切换才能稳定触发 transition。
- HTML 中按钮写：
<button id="toggle-btn">切换遮罩</button> - CSS 中定义初始态：
.overlay { opacity: 0; visibility: hidden; transition: visibility 0.1s, opacity 0.3s; } - JS 只做一件事：
document.getElementById('toggle-btn').onclick = () => overlay.classList.toggle('show'); - 对应 .show 类：
.overlay.show { opacity: 1; visibility: visible; }
transition 属性必须拆开写，且 visibility 时长要远短于 opacity
如果写成 transition: all 0.3s 或 transition: opacity 0.3s, visibility 0.3s，会出现“幽灵点击”：遮罩视觉已消失，但 visibility: hidden 还没生效，用户仍能点到背后的按钮。
- 正确写法：
transition: visibility 0.1s, opacity 0.3s; - 显示时：opacity 从 0→1（0.3s），visibility 立刻变 visible（0.1s 内完成）
- 隐藏时：opacity 从 1→0（0.3s），visibility 在 opacity 到 0 后 0.1s 才切回 hidden
- 千万别把 visibility 的过渡设成 0.3s——它不是动画主体，只是安全收尾
transitionend 事件必须过滤 propertyName === 'opacity'
因为 visibility 和 opacity 都在 transition 列表里，不加过滤，每次动画结束都会触发两次回调，容易导致状态错乱（比如刚 show 完又被 hide）。
立即学习“前端免费学习笔记（深入）”；
- 监听写法：
overlay.addEventListener('transitionend', handleTransitionEnd); - 回调内必须判断：
if (e.propertyName === 'opacity') { /* 此时才真正可执行清理或后续逻辑 */ } - 隐藏完成后想移除元素？必须在该 if 块里执行：
overlay.classList.remove('show');或overlay.remove(); - 别在 visibility: hidden 后立刻 remove()——transitionend 就永远不会触发
遮罩 DOM 结构和定位稍有偏差，滚动/缩放/移动端就全崩
用 position: absolute 或 width: 100% 是线上高频崩溃原因。遮罩必须脱离文档流、覆盖整个视口，且不随页面滚动偏移。
- 必须用：
position: fixed; top: 0; right: 0; bottom: 0; left: 0; - 尺寸写死：
width: 100vw; height: 100vh;（不用 100%，避开 body padding 或 zoom 影响） - z-index 至少设为
9999，真实项目里常被广告位、第三方弹窗压住 - 加
pointer-events: none;到遮罩本身；关闭按钮再单独设pointer-events: auto; - 移动端记得加：
style="touch-action: none;"，并临时禁用 body 滚动：document.body.style.overflow = 'hidden';（show 时设，hide 后恢复）
最容易被忽略的是 pointer-events 配置和 transitionend 的 propertyName 过滤——前者让关闭按钮点不了，后者让回调多跑一遍，状态彻底失控。这两个点不处理，遮罩看着动了，实际交互已经不可靠。
