Modal闪现无动画的根本原因是display: none无法参与CSS过渡，应改用visibility、opacity和transform组合实现；需正确设置进场/退场类、监听transitionend事件、iOS滚动穿透需用position: fixed锁定body，Firefox卡顿需优化box-shadow与will-change。
modal显示时元素突然闪现，没有过渡动画
根本原因是display: none无法参与CSS过渡——它是个“离线状态”，浏览器不计算它的样式变化。必须改用可动画的属性，比如visibility、opacity和transform组合。
推荐做法：初始状态设为visibility: hidden; opacity: 0; transform: scale(0.95);，再通过JS切换一个类（如.is-open）来触发动画。注意visibility控制是否响应事件，opacity控制透明度，transform负责缩放/位移，三者缺一不可。
- 别只写
opacity: 0 → 1，没位移会显得“平铺弹出”，加scale(0.95)更符合真实模态框的入场感 - 过渡时间建议在
0.2s ~ 0.3s之间，太长拖沓，太短像抽搐 - 务必给
transition指定具体属性：transition: opacity 0.25s ease, transform 0.25s ease;，避免意外触发其他属性动画
点击遮罩层关闭modal时，动画反向播放失败
常见错误是JS里直接element.classList.remove('is-open')后立刻display: none或visibility: hidden，导致动画被强制中断。正确做法是监听transitionend事件，在动画结束后再隐藏元素。
更稳妥的方案是用两个类：.is-opening（进场）和.is-closing（退场），配合transition方向控制。例如退场时设opacity: 0; transform: scale(0.9);，并确保visibility在动画结束帧才设为hidden。
立即学习“前端免费学习笔记（深入）”；
- 不要在
transitionend里操作display，优先用visibility+pointer-events: none收尾 - 如果modal内有
input或textarea，退场前记得blur()，否则键盘焦点可能残留 - 移动端要注意
transform可能触发硬件加速，但scale(0)会导致子元素渲染异常，建议下限设为scale(0.01)
modal内容区域滚动时，背景页面跟着动（iOS Safari最明显）
这是iOS Safari的“弹性滚动穿透”问题：当modal内容可滚动但高度不足全屏时，继续拖拽会把滚动传递给
。本质是body没被锁死。
解决方案不是禁用body的overflow（那会导致页面跳动），而是用position: fixed配合top偏移锁定视口。JS打开modal时记录window.scrollY，然后给body加style="position: fixed; top: -${scrollY}px;"；关闭时恢复并window.scrollTo(0, scrollY)。
- 仅靠
overflow: hidden在iOS上无效，必须配合position: fixed - 如果modal本身高度超过视口，内部滚动条要确保
overscroll-behavior: contain，防止触发外层滚动 - 避免用
touch-action: none粗暴拦截，会影响modal内滑动组件（如轮播图）的交互
动画在Firefox中卡顿，尤其是带box-shadow的modal
Firefox对box-shadow + transform组合的复合渲染优化较差，尤其在低配设备上容易掉帧。这不是代码写错，而是渲染管线瓶颈。
缓解方式是把阴影“降级”为伪元素或SVG，或者用will-change: transform提前提示浏览器该元素将动画——但别滥用，每个modal都加会引发内存压力。
- 阴影层级尽量简化，避免多层
box-shadow叠加 - 动画期间临时移除
filter: drop-shadow()，它比box-shadow更重 - 检查是否无意中触发了
layout（如读取offsetHeight），这会让transform动画强制同步回流
transform的起始值、opacity的节奏，以及滚动锁定的时机。最容易被忽略的是iOS滚动穿透的修复时机——必须在modal完全显示后立即执行body锁定，晚几毫秒就可能被用户滑动触发。 
