SVG遮罩动画实现页面过渡效果，核心是用<mask>定义透明区域变化，通过CSS或SMIL控制圆形、矩形、路径等遮罩图形的缩放、位移或形状演变，营造“遮盖→露出”等视觉过渡，并需与DOM更新节奏协同避免闪动。
SVG遮罩动画实现页面过渡效果，核心是用 <mask> 定义透明区域变化，再通过 CSS 或 SMIL 控制遮罩图形（如圆形、矩形、路径）的缩放、位移或形状演变，从而营造“遮盖→露出”或“切入→展开”的视觉过渡。
用圆形遮罩做中心扩散过渡
适合模态框弹出、页面跳转等场景。原理是让一个初始为 0 半径的 <circle> 在遮罩层中快速放大，覆盖全屏后再缩小或反向还原。
- 在
<defs>中定义遮罩：白色背景（可见）+ 黑色圆形（不可见），初始r="0" - 对
<circle>添加animate，控制r从 0 → 超出视口对角线长度（如2000），dur="0.6s"，fill="freeze" - 被遮罩的页面内容需设
mask="url(#fade-mask)"，且自身opacity保持 1
用矩形遮罩做左右滑入/幕布拉开展示
模拟影院幕布拉开或侧边栏滑出效果。关键在控制矩形的 x 或 width 属性随时间变化。
- 遮罩内放一个
<rect>，初始x="-100%" width="100%" height="100%"（完全左偏移） - 动画让
x从-100%到0，或width从0到100%，配合ease-in-out更自然 - 若要做“双侧合拢关闭”，可用两个矩形分别从左右向中间移动，同时遮罩内容区域
用路径遮罩实现不规则形状过渡（如手绘感、水波纹）
比基础几何图形更具设计表现力，但需注意路径动画的兼容性与性能。
- 用
<path>定义遮罩轮廓，起始为极小闭合路径（如单点），终点为覆盖全屏的rect路径数据 - 通过
<animate attributeName="d" ...>过渡路径字符串，需确保起止d值节点数一致（可用工具预处理） - 更稳妥的做法：用 CSS
clip-path配合 SVG<path>的getTotalLength()+stroke-dasharray模拟描边展开，再反相为遮罩
和页面切换逻辑联动的关键细节
遮罩动画不是孤立动效，需与路由、DOM 更新节奏协同，避免闪动或错帧。
- 过渡开始前，新页面内容应已渲染但
visibility: hidden或opacity: 0，待遮罩收尾再设为可见 - 推荐用 CSS 动画 +
animationend事件触发 DOM 替换；若用 SMIL，监听endEvent更可靠 - 移动端注意开启
will-change: transform或使用transform替代left/top位移，保障帧率
