bootstrap modal淡入时长由.fade类的transition属性控制，js的show()方法不接受毫秒数配置；需用高优先级选择器如.modal.fade .modal-dialog覆盖css，避免影响alert等其他.fade组件。
直接改 CSS，别碰 JS 参数——Bootstrap Modal 的淡入时长由 .fade 类的 transition 属性控制，JS 的 show() 方法不接受毫秒数配置。
为什么改 show() 或 animation: false 没用
Bootstrap 5 的 Modal 构造函数确实有 animation 选项，但它只接受布尔值：true（启用 fade）或 false（完全禁用动画），不支持传入 { duration: 300 } 这类对象。所谓“JS 控制时长”是常见误解——底层动画完全由 CSS transition 驱动，JS 只负责添加/移除 .show 类。
-
new bootstrap.Modal(element, { animation: false })→ 移除.fade类，硬切显示，无过渡 - 试图传入
{ animation: '0.3s' }会被忽略，控制台无报错但无效 - 即使你手动调用
modal.show()，它也不会重写已生效的 CSS transition 规则
必须用高优先级选择器覆盖 .fade 的 transition
直接写 .fade { transition: opacity 0.3s ease; } 看似简单，但会污染所有带 .fade 的组件（alert、tooltip、offcanvas），导致它们也变慢。正确做法是限定作用域到模态框内部：
- 推荐写法：
.modal.fade .modal-dialog { transition: opacity 0.3s ease-out, transform 0.3s ease-out; } - 若只想改淡入（show）阶段，可加
.modal.show .modal-dialog单独控制显示态 - 务必确保自定义 CSS 文件在 Bootstrap CSS 之后加载，否则规则被覆盖
- 避免
!important——用更具体的选择器（比如加上body前缀）就能赢过默认权重
移动端卡顿？别只拉长时间，要加硬件加速
在 iOS Safari 或老旧安卓 WebView 中，单纯把 transition 改成 0.5s 可能反而更卡：因为 opacity + transform 过渡若未触发 GPU 加速，会长时间占用主线程。
- 给
.modal-dialog加上transform: translateZ(0)或will-change: opacity - 避免在
.modal-dialog上设置margin动画——它会触发 layout，拖慢整个过渡 - 如果项目用了 Bootstrap 5.3+，检查是否误启了
data-bs-animation="true"：这个属性会绕过 CSS transition，改走 JS 动画逻辑，导致你的 CSS 覆盖失效
真正容易被忽略的是作用域控制——很多人花半小时调试 JS，结果发现只是 .fade 规则影响了 tooltip，导致页面其他地方动画也变慢了。盯住浏览器开发者工具的「Computed」面板，看最终生效的 transition 值从哪来，比猜更可靠。
