用 mask + transition 实现由内向外展开揭示更可控自然，因 mask 支持径向渐变软边、不影响子元素交互，而 clip-path 无中间态、opacity 会连带淡出内部控件；需避 safari 的 mask-mode: alpha 兼容问题，用 mask-size 动画并确保全屏定位为 position: fixed; inset: 0。
直接用 mask + transition 实现由内向外展开揭示，比 clip-path 或 opacity 更可控、更自然，但必须避开 Safari 的 mask-mode: alpha 兼容陷阱。
为什么选 mask-size 而不是 clip-path 或 opacity
遮罩展开要的是“内容从中心浮现、边缘渐显”的视觉语义，clip-path: circle(0% at 50% 50%) → circle(100% at 50% 50%) 能做到硬边展开，但无法控制边缘透明度；opacity 会让整个遮罩层（含内部按钮、文字）一起淡出，交互失效。而 mask 可以用径向渐变定义软边，只影响背景可见性，不干扰子元素渲染和点击。
关键差异点：
-
mask支持灰度渐变、半透明过渡，适合融合阴影、模糊或文字穿透效果 -
clip-path是布尔裁剪（显示/隐藏），无中间态，动画生硬 -
opacity作用于整棵 DOM 子树，遮罩内若需放关闭按钮或搜索框，会一并变虚
mask-image 必须用 radial-gradient，且起始 mask-size 设为 0% 0%
mask-size: 0% 0% 不是“没遮罩”，而是把渐变圆缩成一个点——此时黑色中心极小，透明区域占满全图，内容完全可见；展开时拉到 200% 200%，确保圆足够大，能覆盖容器两倍宽高，避免边缘露白。
典型写法：
.reveal-trigger {
mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
mask-size: 0% 0%;
mask-repeat: no-repeat;
mask-position: center;
transition: mask-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-trigger.active {
mask-size: 200% 200%;
}
注意：
- 别用
mask-mode: alpha—— 多数浏览器（包括 Safari 16.6）仍不支持，会导致遮罩完全不生效 -
radial-gradient中的black和transparent顺序不能反，否则是“从黑到透”变成“从透到黑”，展开方向相反 -
cubic-bezier(0.34, 1.56, 0.64, 1)第二个参数 >1 是关键：制造“过冲”回弹感，模拟真实布料拉开的惯性，比ease-out更自然
全屏定位必须用 position: fixed; inset: 0，不能依赖 100vh
移动端 Safari 地址栏收放时，100vh 会跳变，导致遮罩漏底或盖不住顶部；inset: 0（等价于 top: 0; right: 0; bottom: 0; left: 0）直接锚定视口四边，不受滚动、缩放、DPI 影响。
常见错误写法及后果：
-
position: absolute; width: 100%; height: 100%→ 遮罩被父容器overflow: hidden截断，或随滚动偏移 -
height: 100vh→ iOS Safari 地址栏弹出时，遮罩突然变矮，“露出”底部内容 -
transform: scale(1)→ Safari 强制启用合成层，可能干扰mask过渡插值，导致卡顿
正确结构应是独立挂载在 下的元素，避免嵌套在任何 transform 或 filter 容器中。
JavaScript 触发时机：用 document.body.classList.toggle()，别碰 display
遮罩动画靠 mask-size 过渡，前提是元素始终在文档流中且未被强制重绘。一旦用 display: none 切换，过渡链就中断，下次显示直接跳到终态。
推荐 JS 控制方式：
const overlay = document.querySelector('.reveal-trigger');
// 进入
overlay.classList.add('active');
// 退出（比如点击关闭）
overlay.addEventListener('click', () => {
overlay.classList.remove('active');
});
容易踩的坑：
- 在
remove()或innerHTML = ''后再加类 → DOM 已销毁，过渡根本不会触发 - 监听
transitionend后立刻display: none→ 动画完成瞬间强制隐藏，视觉上仍是“闪退” - 没加
will-change: mask-size→ Safari 15.4–16.1 在body::before上可能掉帧，需手动加前缀或改用真实元素
最易被忽略的是：Safari 对伪元素（如 body::before）的 mask 渲染有延迟 bug，若遮罩层是伪元素，务必先读一次 offsetHeight 强制重绘，再加 active 类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
