Bootstrap 5 Modal 动画由CSS transition控制，JS仅切换.show类；需覆盖.transform和.opacity的transition，使用cubic-bezier缓动，并确保.modal.fade结构正确、定位避免重排。
为什么改CSS而不是JS参数
Bootstrap 5 的 Modal 动画完全由 CSS transition 控制，show()、hide() 这些 JS 方法只负责切换 .show 类，不参与动画逻辑。传入 { animation: 300 } 或设置 data-bs-animation 在 Bootstrap 5 中无效——控制台不会报错，但也不会生效。
常见错误是翻文档找“动画时长配置项”，结果白调半天 JS。真正该盯的是浏览器开发者工具的「Computed」面板里，.modal-dialog 元素最终生效的 transition 值从哪来。
必须同时覆盖 transform 和 opacity 的 transition
默认动画靠 .modal.fade .modal-dialog 上声明的 opacity 和 transform 双过渡实现：前者控制淡入，后者控制缩放/位移。漏掉任意一个，就会出现“只透明不居中”或“只移动不淡入”的断裂效果。
.modal.fade .modal-dialog { transition: transform 0.3s ease-out, opacity 0.3s ease-out; }- 别用
transition: all—— Safari 下容易把z-index或display也拉进过渡，导致闪动 - 缓动函数建议用
cubic-bezier(0.22, 0.61, 0.36, 1)，比ease-out更稳，尤其在低端安卓 WebView 中 - 自定义 CSS 文件必须在 Bootstrap CSS 之后加载，否则规则被覆盖
从底部上滑入场要同步改三处状态
想改成从下往上滑入，不能只改 .modal.show 的最终态。初始态、目标态、遮罩层三者不同步，动画就会跳变或遮罩“啪”一下闪出来。
立即学习“前端免费学习笔记（深入）”；
.modal.fade .modal-dialog { transform: translateY(100%); opacity: 0; }.modal.fade.show .modal-dialog { transform: translateY(0); opacity: 1; }-
.modal.fade .modal-backdrop { transition: opacity 0.3s ease-out; }（确保遮罩淡入节奏一致） - 务必确认最外层容器有
class="modal fade"—— 不是写在.modal-dialog上，也不是靠data-bs-fade属性
移动端卡顿不是因为时间太短，而是重排没绕开
把过渡时间从 0.15s 拉长到 0.5s 可能反而让 iOS Safari 更卡，因为主线程被长时间占用。真正瓶颈常是误用了 top/left/margin 定位，触发了高成本的 layout 计算。
- 检查你的
.modal-dialog是否仍用top: 50%; left: 50%; margin: -200px 0 0 -300px;—— 这会退化为重排 - 正确写法是：
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - 加
will-change: transform或transform: translateZ(0)可提前创建合成层，但仅在动画期间启用，结束后应移除will-change - 避免在
.modal-dialog上设margin动画，它会强制触发布局
最容易被忽略的其实是作用域泄漏：很多人调试半天 JS，结果发现只是 .fade 规则让 tooltip 也变慢了；或者 backdrop 的 transition 时长和 modal 主体不一致，导致视觉撕裂。
