mask-size动画不生效因mask-image未定义或不支持插值、容器触发新格式化上下文；需用标准径向渐变、显式设置mask-origin/mask-position、遮罩层挂body下、加will-change，并注意事件穿透与退场反向动画。
mask-size 动画为什么在加载遮罩里不生效？
直接写 mask-size: 0; transition: mask-size 0.4s ease-out; 大概率没反应——因为 mask-image 没定义，或用了不支持动画的值（比如 radial-gradient 未配 circle at center）。浏览器对 mask-size 的过渡支持很挑剔，必须同时满足：有明确的起始/结束尺寸、mask-image 是可插值的渐变、且容器本身没有触发新格式化上下文（如父级带 transform 或 filter）。
实操建议：
- 用
mask-image: radial-gradient(circle at center, black 0%, black 100%)，确保是标准圆形渐变 - 起始态设
mask-size: 0 0，结束态设mask-size: 200% 200%（覆盖全屏足够） - 遮罩层必须挂到
下，避免祖先元素的transform/filter中断 mask 渲染 - 加
will-change: mask-size提前告知浏览器该属性会变，尤其在 Safari 上能减少卡顿
波纹从中心扩散但页面内容被裁掉一块？
常见现象：遮罩看似扩散了，但页面底部或右侧总有一条白边/黑边露出来。根本原因是 mask-size 基于元素自身宽高计算，而遮罩层若用 width: 100vw; height: 100vh，在 iOS Safari 横屏或地址栏收放时，vh 值突变，导致 mask 覆盖区域错位。
实操建议：
- 遮罩层改用
min-width: 100vw; min-height: 100vh;，保证最小覆盖视口 -
mask-origin和mask-position都显式设为center，避免默认行为偏差 - 真要严苛适配，用 JS 初始化时写
style="mask-size: 0 0; width: ${window.innerWidth}px; height: ${window.innerHeight}px;"，并在resize和orientationchange时同步更新
mask 实现的波纹遮罩点不到底下按钮？
mask 本身不拦截事件，但如果你给遮罩层加了 background-color 或其他视觉层，又没处理好 pointer-events，就会误锁交互。更隐蔽的问题是：某些安卓 WebView 对 mask + pointer-events: none 组合支持不一致，子元素即使设了 pointer-events: auto 仍可能失效。
实操建议：
- 遮罩层必须设
pointer-events: none - 内部所有子元素（如加载图标、文字）显式设
pointer-events: auto，不能依赖继承 - 避免在遮罩层上绑定任何
onclick或addEventListener，哪怕只是空函数——它会隐式激活事件捕获路径 - 测试时用 Chrome DevTools 的 “Rendering > Paint flashing” 看 mask 区域是否被正确绘制，未绘制区域无法响应穿透
加载完成时波纹“缩回去”还是“炸开消失”？
多数人只做“扩散入场”，却忽略“收缩退场”。直接移除遮罩或设 display: none 会导致波纹中断，视觉上像被硬切掉。真正平滑的做法是反向动画：从 mask-size: 200% 200% 缩回 0 0，再隐藏。
实操建议：
- 入场用类
.loading-enter，退场用.loading-leave，两者都声明transition: mask-size 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 退场开始前先加
.loading-leave类，等transitionend触发（监听event.propertyName === 'mask-size'），再移除元素或设display: none - 别在退场动画中同时改
opacity——mask和opacity过渡叠加容易在低端机上丢帧
CSS 的 mask 波纹效果看着轻量，但实际对渲染管线压力不小，尤其在加了 backdrop-filter 或多层 filter 的页面里。iOS Safari 对 mask-size 动画的支持仍不稳定，2026 年最新版仍有偶发跳帧；如果项目需强兼容，优先考虑用 SVG transform: scale() 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
