遮罩层与弹窗动画不同步的典型表现是视觉“错拍”，根本原因是二者未共用统一动画时序；应通过 animation + animation-delay 配合 animation-fill-mode: forwards 和一致缓动函数实现纯 css 同步，transition 方案则须满足三条件：合并 transition 声明、统一触发类、明确初始状态；移动端 safari 需 will-change 临时优化。
遮罩层和弹窗动画不同步的典型表现
遮罩 .mask 淡入、弹窗 .modal 滑入/缩放，但视觉上明显“错拍”：要么遮罩闪一下才变暗，要么弹窗先弹出来再等遮罩跟上。根本原因是两个元素没共用同一套动画时序控制，CSS 动画各自触发、各自计时，浏览器无法自动对齐。
用 animation + animation-delay 强制同步
不依赖 JS 控制时机，纯 CSS 就能对齐。关键不是让两者“同时开始”，而是让它们在同一个动画周期内完成各自的阶段变化：
-
.mask用opacity动画从 0 → 0.6，持续 200ms，animation-delay: 0ms -
.modal用transform: scale()或translateY()，同样 200ms，但加animation-delay: 50ms—— 这 50ms 是留给遮罩先铺开、视觉建立“暗场感”的缓冲 - 两者都设
animation-fill-mode: forwards，避免动画结束后回退 - 务必统一使用
ease-out或cubic-bezier(0.34, 1.56, 0.64, 1)等非线性缓动，线性（linear）会让过渡生硬，放大不同步感
transition 方案下容易漏掉的三个条件
如果用 transition（比如靠 class 切换触发），不同步更常见，因为 transition 不像 animation 那样显式可控。必须同时满足：
- 遮罩和弹窗的
transition属性写在同一行，例如：transition: opacity 200ms ease-out, transform 200ms ease-out—— 分开写会导致浏览器按属性分组重绘，极易错拍 - 触发类（如
.is-open）要一次性加到父容器上，而不是分别加给.mask和.modal；否则 DOM 更新时机差几毫秒就会脱节 - 初始状态必须明确：遮罩
opacity: 0且pointer-events: none，弹窗transform: scale(0.95)或translateY(20px)，不能依赖display: none切换，那会跳过 transition
移动端 Safari 的 will-change 补丁
iOS 15–16 的 Safari 对 opacity + transform 组合动画有渲染延迟，尤其遮罩变暗慢半拍。临时解法是在触发前一帧手动提升图层：
.mask.is-opening,
.modal.is-opening {
will-change: opacity, transform;
}
但注意：will-change 不能常驻，动画结束立刻移除（可用 animationend 事件或 transitionend），否则内存占用升高、滚动卡顿。这不是标准方案，是 Safari 特定兜底。
真正难的不是写对代码，是得在 Chrome、Firefox、Safari 上逐帧录屏比对——人眼觉得“差不多”，设备可能差 3 帧。这点没法偷懒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
