遮罩层在load事件前消失，是因为监听了DOMContentLoaded而非load；前者仅等待HTML解析完成，而load才确保图片、字体等所有资源加载完毕，避免闪屏或错位。
为什么遮罩层在 load 事件前就消失了
遮罩层提前消失，本质是监听了 DOMContentLoaded 而非 load。前者只等 HTML 解析完，图片、字体、CSS 中的 @font-face、外部样式表都可能还没加载；后者才真正等所有资源（含 <img>、<iframe></iframe>）就绪。若遮罩依赖某张关键图或自定义字体显示状态，早于 load 移除就会导致闪屏或文字错位。
opacity + transition 卡顿或直接跳变怎么办
常见现象是设置 opacity: 0 和 transition: opacity 0.4s ease 后动画不流畅，甚至瞬间消失。原因通常是浏览器没把遮罩层提升到独立合成层，导致每帧重绘而非硬件加速。
- 给遮罩层加
will-change: opacity或transform: translateZ(0)，强制创建合成层 - 绝对避免在动画中切换
display（如从none→block），这会中断 transition；改用visibility: hidden/visible配合opacity - 检查父容器是否设了
overflow: hidden或clip-path，可能裁掉过渡中的半透明帧
遮罩层 opacity: 0 后仍拦截点击
透明 ≠ 不可点。默认 pointer-events 是 auto，即使 opacity: 0，鼠标事件仍会被捕获。解决方案很简单：在遮罩层完全淡出后（即 transitionend 触发时），再设 pointer-events: none；或者更稳妥地，在淡出动画开始前就加上该声明，仅保留视觉遮挡，不阻断交互。
动画时长和 Safari 兼容性怎么调
0.1s 太短，人眼无法感知过渡；1.2s 又拖慢首屏可交互时间。实测 0.3–0.5s 是多数场景的平衡点。Safari 对 will-change 和 opacity 过渡较敏感，建议：
- 用
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)替代ease，更顺滑 - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Paint Rectangles”，确认遮罩层没有每帧重绘（说明已进合成层）
- 服务端渲染（SSR）下
load依然可靠；但若页面里用了document.write或动态插入脚本，需额外校验事件触发顺序
最易被忽略的是：遮罩层 CSS 必须内联或提前加载，否则动画类生效时样式还没解析，会出现 FOUC（无样式内容闪烁）。别指望它自己“聪明地等”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
