Bootstrap 5 模态框动画需作用于 .modal.fade .modal-dialog，初始设 transform: translateY(-20px) 和 opacity: 0，配合 .modal.fade.show .modal-dialog 恢复状态，并确保 HTML 含 fade 类，避免 transition: all 及干扰性 transform。
模态框默认没动画，transition必须作用在正确元素上
Bootstrap 5 的 modal 默认只靠 display: none 控制显隐，不触发 transition。直接给 .modal 或 .modal-dialog 加 transition 没用——因为显示时是 JS 瞬间切换 display 和 opacity，浏览器根本来不及过渡。
实操建议：
- 动画必须作用在
.modal.fade .modal-dialog上，且仅当父级有.fade类时才生效（Bootstrap 依赖这个类触发 CSS 动画逻辑） -
.modal-dialog初始状态需设transform: translate(0, -20px)+opacity: 0，显示时恢复为transform: translate(0, 0)+opacity: 1 - 务必配合
.modal.fade.show .modal-dialog的最终态定义，否则动画只播一次就卡住
show 类的时机很关键，别漏掉 .fade
Bootstrap 是靠 JS 在模态框 show 过程中动态加 .show 类，并依赖 .fade 类存在才启用 CSS 动画流程。如果 HTML 里没写 fade，JS 就不会触发动画逻辑，transition 再全也没用。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 模态框一闪就出，没任何过渡效果 → 检查是否漏了
fade类：<div class="modal fade"> - 第一次点开有动画，第二次开始变快或消失 → 可能 JS 多次调用
modal('show')导致.show类未被正确清理，建议用modal('hide')显式关闭后再打开 - 动画方向反了（比如从右往左）→ 查看
transform初始值是否与 Bootstrap 默认的scale(0.95)冲突，优先覆盖.modal.fade .modal-dialog而非全局重置
自定义动画要绕过 Bootstrap 的 scale 干扰
Bootstrap 5 默认用 transform: scale(0.95) 实现淡入缩放，如果你只想做垂直位移+淡入，得显式覆盖它的 transform 值，否则两个 transform 会打架。
实操建议：
- 不要只改
opacity，一定要同时控制transform，否则 Safari 下可能出现闪烁或跳变 - 推荐写法：
.modal.fade .modal-dialog { transition: transform 0.3s ease-out, opacity 0.3s ease-out; transform: translateY(-20px); opacity: 0; } .modal.fade.show .modal-dialog { transform: translateY(0); opacity: 1; } - 避免用
transition: all—— 它会让z-index、display等不可动画属性也参与过渡，引发渲染异常
移动端要注意 transform 触发层叠上下文的问题
在 iOS Safari 或部分安卓 WebView 中，transform 会创建新的层叠上下文，导致模态框遮不住下层的 fixed 元素（比如底部导航栏）。这不是动画本身的问题，而是 CSS 渲染层级被意外改变。
解决路径：
- 给
.modal-backdrop加z-index: 1055（比默认高一级），并确保它没被父容器的transform或will-change截断 - 慎用
will-change: transform—— 它虽可能提升动画性能，但会强制新建合成层，反而加剧遮盖失效 - 真遇到遮盖失败，临时方案是给被遮盖的
fixed元素加transform: translateZ(0)强制提层，但这是权宜之计，根源还是检查模态框父级有没有意外的transform或overflow: hidden
.fade，或者多加一行 transition: all，都可能让效果完全失效。 
