Bootstrap Modal入场动画时长由CSS transition控制，需覆盖.modal.fade .modal-dialog的transform和opacity属性，同步修改.modal-backdrop.fade，确保HTML含fade类。
直接改 CSS 的 transition，别碰 JS 的 show() 方法
Bootstrap Modal 的入场动画时长完全由 CSS transition 控制，show() 方法不接受毫秒数参数——传 { animation: 300 } 或 data-bs-animation="0.3s" 都会被忽略，控制台无报错但无效。
根本原因是：JS 只负责添加 .show 类，动画本身由浏览器根据 .modal.fade .modal-dialog 上的 transition 规则自动触发。
-
.fade类自带默认transition: opacity 0.15s linear, transform 0.15s ease-out（注意是 150ms，不是 300ms） - 想改时长，必须用更高优先级选择器覆盖它，比如
.modal.fade .modal-dialog - 切勿写
.fade { transition: ... }——这会污染alert、tooltip等所有带.fade的组件
正确覆盖方式：限定作用域 + 显式声明属性
在自定义 CSS 文件中（且引入顺序必须在 Bootstrap CSS 之后），写：
.modal.fade .modal-dialog {
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out;
}
关键点：
- 必须同时写
transform和opacity，漏掉任一属性会导致位移或淡入失效 - 别用
transition: all 0.3s——它会把margin、padding等无关属性拖进动画，引发重排卡顿 - 缓动函数建议用
cubic-bezier(0.22, 0.61, 0.36, 1)（Bootstrap 默认值），比ease-out在低端 WebView 中更稳 - 如果只想改入场（show），不改退场（hide），这个写法已足够；若需区分，可额外加
.modal.fade.show .modal-dialog规则
移动端卡顿？加硬件加速，别只拉长时间
在 iOS Safari 或老旧安卓 WebView 中，单纯把时长设成 0.5s 可能反而更卡——因为 transform + opacity 过渡未触发 GPU 加速时，会长时间占用主线程。
缓解方案：
- 给
.modal-dialog加transform: translateZ(0)或will-change: opacity - 避免在动画过程中操作
margin、padding或其他触发 layout 的属性 - 检查开发者工具「Computed」面板，确认最终生效的
transition值确实来自你写的规则，而不是 Bootstrap 默认样式
为什么 backdrop 动画不同步？两处必须一起改
点击遮罩层关闭时模态框“啪”一下消失，大概率是 .modal-backdrop 的动画没跟上。它的过渡逻辑独立于主体，但必须严格同步。
必须同时覆盖：
.modal-backdrop.fade {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.modal-backdrop.show {
opacity: 0.5;
}
- 时长（
0.3s）必须和.modal-dialog的完全一致，否则视觉撕裂 - 若不想动 backdrop 动画，设
.modal-backdrop.fade { transition: none; }即可，但别只改.show - 不要用
!important——用更具体的选择器（如.my-modal .modal-backdrop.fade）就能赢过默认权重
最常被忽略的是 HTML 结构里漏了 fade 类： —— 没它，JS 根本不会触发动画流程，CSS 再全也白搭。
