遮罩层缩放动画卡顿或闪屏本质是浏览器对 transform: scale() 和 opacity 的合成层处理不一致，尤其在移动端 webkit 内核下易触发重绘而非 gpu 加速；需确保遮罩层独立成层、用 position: fixed、避免嵌套于 overflow: hidden 或 transform 父容器中，并动态设置 transform-origin 以精准控制缩放中心。
遮罩层缩放动画卡顿或闪屏
本质是浏览器对 transform: scale() 和 opacity 的合成层处理不一致，尤其在移动端 WebKit 内核下容易触发重绘而非 GPU 加速。关键不是“加了 will-change”，而是得确保遮罩层独立成层且无干扰属性。
- 给遮罩元素显式设置
transform: translateZ(0)或will-change: transform, opacity（仅在动画前一帧设，动画结束立即移除） - 避免同时修改
width/height或top/left—— 这会强制回退到 CPU 渲染 - 遮罩层必须用
position: fixed，且不嵌套在有overflow: hidden或transform的父容器里，否则裁剪或坐标错乱 - Chrome 115+ 对
clip-path缩放支持变差，优先用transform: scale()+origin控制缩放中心
CSS 全屏转场中如何精准控制缩放中心点
默认 transform-origin 是 50% 50%，但“全屏切换”常需从用户点击位置、导航按钮位置或上一页停留位置出发缩放。硬写死 50% 50% 会让动效脱离上下文，显得机械。
- 用 JS 动态计算点击坐标并设为
transform-origin：例如el.style.transformOrigin = `${x}px ${y}px` - 若从按钮触发，别直接取
button.getBoundingClientRect()，要减去window.scrollX/Y，否则滚动后坐标偏移 - 缩放目标尺寸统一用
100vw/100vh，不用100%—— 后者依赖父容器高度，易在 flex/grid 布局中失效 - 动画结束后记得重置
transform-origin为50% 50%，否则影响后续其他 transform 操作
页面切换时内容闪烁或白屏
这不是动画问题，是 DOM 替换时机和渲染流水线没对齐。常见于用 innerHTML 直接替换、或新页面 CSS 尚未就绪时就触发缩放动画。
- 新内容插入后，先
el.offsetHeight强制触发一次 layout，再开动画 —— 防止浏览器把“插入”和“缩放”压进同一帧导致跳帧 - 遮罩层必须在新内容
display: block之后、动画开始之前就已存在于 DOM，且初始状态为opacity: 0; transform: scale(0.8)（不能是display: none） - 避免在
@keyframes里写display: block/none—— display 切换无法动画，会导致瞬间显示/隐藏 - 如果用
prefers-reduced-motion，别只关动画，要同步跳过遮罩层插入逻辑，否则残留 DOM 节点影响布局
Vue/React 中复用遮罩组件的坑
框架的异步更新和组件卸载机制会让遮罩层生命周期和动画节奏错位。最典型的是：动画还没播完，组件就被销毁，transform 停在中间态，甚至触发 transitionend 事件丢失。
立即学习“前端免费学习笔记（深入）”；
- 不要用
v-if或useState控制遮罩显隐 —— 改用v-show或style={{ display: visible ? 'block' : 'none' }} - 监听
transitionend时，加一层el === event.target校验，防止子元素冒泡干扰 - 在组件
beforeUnmount（Vue）或useEffect cleanup（React）里手动移除遮罩层，并检查是否正在动画中，必要时调用el.cancelAnimationFrame或重置transform - 多个路由共用同一遮罩实例时，确保每次动画前都重置
transform和opacity，别依赖 CSS 初始化值
缩放动画看着简单，但真正跑稳需要同时盯住渲染层、DOM 生命周期、框架更新队列三处。最容易被忽略的是：遮罩层的 z-index 必须高于所有页面内容，且不能被任意一个父级的 isolation: isolate 或 contain: layout 截断合成上下文。
