模态框缩放动画卡顿或闪动，主因是transform-origin不匹配、visibility/display切换不同步、父容器尺寸未固定或height:auto触发重排；应显式设transform-origin: center，仅用opacity和transform: scale()，配合visibility: hidden与transition延迟隐藏，并确保容器宽高明确。
模态框缩放动画卡顿或闪一下？检查 transform-origin 和 visibility 配合
缩放动画（scale）本身很轻量，但模态框一打开就“跳”或结束时“闪一下”，大概率是 transform-origin 默认值（50% 50%）和元素初始位置不匹配，或者 visibility/display 切换时机没对齐。动画期间如果父容器尺寸未固定、或子元素触发重排（比如用 height: auto），也会导致卡顿。
实操建议：
- 给模态框容器显式设置
transform-origin: center（即使默认也是它，也写上——避免被继承覆盖） - 动画全程只用
opacity+transform: scale()，禁止在动画关键帧里改display；用visibility: hidden控制是否可交互，配合transition: visibility 0s 200ms延迟隐藏（200ms 对应动画时长） - 确保模态框父容器有明确宽高，或设
min-width/min-height，防止 scale 过程中内容回流
用 CSS 变量控制 scale 值，但动画不生效？确认自定义属性作用域和 calc() 使用方式
CSS 变量本身不触发重绘，必须用在能触发过渡/动画的属性上（如 transform）。直接写 transform: scale(var(--scale)); 是无效的——CSS 不允许变量裸奔进函数参数，必须套 calc() 或在 JS 中拼接。
实操建议：
- 正确写法是：
transform: scale(calc(var(--scale, 1)));，注意括号和默认值 - 变量需定义在能被模态框选中器继承的作用域里，比如
:root或模态框自身类上；若用 JS 动态改，推荐操作element.style.setProperty('--scale', '1.2')，而非改 class - 别在
@keyframes里引用变量——它不会响应变化；动画逻辑必须靠 JS 触发类切换，再靠 class 上的transition去驱动 scale 变化
移动端 Safari 上 scale 动画失真或模糊？强制启用 GPU 加速并避开 will-change 陷阱
iOS Safari 对非整数 scale 值渲染较弱，尤其从 scale(0) 突然跳到 scale(1)，容易出现文字锯齿、图标模糊。这不是 bug，是浏览器主动降级了合成层处理。
实操建议：
- 给模态框加
transform: translateZ(0)或will-change: transform强制走 GPU 合成（但注意：不要全局加will-change，仅在动画开始前 JS 设置，结束后清除） - 避免用
scale(0)作为起始值——改用scale(0.99)或scale(0.01)，视觉无差别，但渲染更稳 - 如果模态框含图片或 SVG，确保其本身尺寸是整数像素，且未被父容器用
rem/%挤压变形
想让不同模态框用不同缩放曲线？别堆 transition-timing-function，用 CSS 自定义属性分层控制
一个项目里可能有「弹窗」「抽屉」「全屏遮罩」三种模态框，各自需要不同的缩放节奏（比如弹窗要缓入缓出，抽屉要快进慢出）。硬写三套 transition 规则容易冲突，也不利于复用。
实操建议：
- 统一用一个动画类名（如
.modal--animate），然后按类型加修饰类：.modal--dialog、.modal--drawer - 在每个修饰类里定义变量：
--ease: cubic-bezier(0.34, 1.56, 0.64, 1);，再在动画规则里写transition: transform 0.3s var(--ease), opacity 0.3s var(--ease) - 这样既保持结构一致，又避免重复声明 timing-function，JS 控制开关时只需增删主类，无需关心具体曲线
真正麻烦的是 scale 动画和 backdrop 模糊滤镜叠加时的性能消耗——iOS 上 backdrop-filter: blur(10px) + scale 一起动，大概率掉帧。要么降级为纯色遮罩，要么把 blur 拆到动画结束后再加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
