display: none 使元素彻底脱离渲染流，浏览器跳过其样式计算与布局，导致 transform 和 opacity 过渡无法启动；应改用 visibility: hidden + opacity: 0 + transform: scale(0.85) 协同过渡，并显式声明 transition 属性。
为什么直接用 display: none 会导致缩放动画失效
因为 display: none 会让元素彻底脱离渲染流，浏览器跳过其样式计算和布局，transform: scale() 和 opacity 的过渡根本不会启动。你看到的只是“突然出现”，不是动画中断——它压根没开始。
必须改用可参与过渡的属性组合：
-
visibility: hidden控制是否渲染（避免交互） -
opacity: 0控制透明度（可过渡） -
transform: scale(0.85)控制初始大小（可过渡；别用scale(0)，iOS 下子元素可能消失或渲染异常）
三者缺一不可：只靠 opacity 会平铺弹出，没有纵深感；只靠 scale 会边缘模糊或闪烁；漏掉 visibility，隐藏时仍可点击或聚焦。
用 transition 实现缩放+淡入的最小可行写法
核心是定义两个状态类，用 JS 切换触发过渡。不依赖 @keyframes，更可控、更轻量：
立即学习“前端免费学习笔记（深入）”；
/* 初始隐藏态 */
.modal {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
<p>/<em> 显示态 </em>/
.modal.is-open {
visibility: visible;
opacity: 1;
transform: scale(1);
pointer-events: auto;
}关键细节：
-
transition必须显式列出属性，避免意外触发动画（比如transition: all可能让background-color也动） - 时间建议
0.2s ~ 0.3s：短于0.2s感觉抽搐，长于0.3s显得迟滞 -
ease比linear更自然，模拟真实物理加速/减速 -
pointer-events: none必须随visibility: hidden同步设置，否则遮罩层下内容仍可点击
关闭时动画反向播放失败的典型原因
常见错误是 JS 里执行 element.classList.remove('is-open') 后立刻设 style.display = 'none' 或强制 visibility: hidden，导致过渡被浏览器中止。
正确做法只有两种：
- 监听
transitionend事件，在动画结束帧再收尾：element.addEventListener('transitionend', () => { element.classList.remove('is-open'); }, { once: true }); - 用两个独立类控制方向：
.modal.is-closing { opacity: 0; transform: scale(0.9); }，并在 CSS 中为.is-closing单独写transition，JS 先加is-closing，再在transitionend里移除所有类
注意：不要在 transitionend 里操作 display，优先用 visibility: hidden + pointer-events: none 收尾；如果模态框内有 <input>，退场前记得调用 input.blur()，否则键盘焦点残留。
iOS 滚动穿透和 Firefox 渲染卡顿怎么破
iOS Safari 的“弹性滚动穿透”不是 bug，是设计行为：当 modal 内容高度不足全屏，继续拖拽会把滚动传递给 <body>。解决方案不是 body { overflow: hidden }（会引起页面跳动），而是：
-
body加position: fixed+top: -${window.scrollY}px锁定视口 - modal 关闭后恢复
body.style.position = ''并window.scrollTo(0, scrollY)
Firefox 卡顿常源于 box-shadow 或未声明 will-change: transform。解决方式：
- 缩放动画元素上加
will-change: transform（仅动画期间，用 JS 动态增删） - 避免在
.modal上叠加多层box-shadow，改用单层半透背景色模拟 -
transform: scale()本身已触发硬件加速，无需额外translateZ(0)
真正容易被忽略的是 scale 下限值：iOS 对 scale(0) 渲染异常，务必设为 scale(0.01) 或 scale(0.85) 起始，而不是追求“完全不可见”。动画是体验，不是像素级精确。
