模态框淡入动画由 .fade 类控制，其 transition: opacity 0.15s linear 是关键；需用更高优先级选择器如 .modal.fade .modal-dialog 覆盖，避免影响其他组件。
模态框淡入动画由哪个 CSS 类控制
bootstrap 的模态框淡入动画（fade in）本质是通过 .modal.fade .modal-dialog 上的 opacity 和 transform 过渡实现的，关键在于 .fade 类自带的 transition 声明。默认值是 transition: opacity 0.15s linear; —— 注意，这个时长是 150ms，不是常见的 300ms，容易误判。
修改速度不能只改 JS 中的 show 方法参数，因为动画行为由 CSS 驱动，JS 只负责加/删类。直接覆盖 CSS 才是最稳的方式。
如何安全覆盖 fade 动画时长
必须用更高优先级的选择器重写 .fade 的 transition，否则 Bootstrap 的原始样式会生效。推荐在自定义 CSS 文件中（且引入顺序在 Bootstrap CSS 之后）写：
.modal.fade .modal-dialog {
transition: opacity 0.3s ease-out;
}
注意几点：
- 不要只写
.fade { transition: ... }—— 它会影响所有带.fade的组件（如 alert、tooltip），造成意外动画 - 务必限定到
.modal.fade .modal-dialog或更精确的.modal.show .modal-dialog（针对显示态） - 如果想同时改淡入和淡出，需确保过渡属性可逆；
ease-out在 show 时更自然，hide 时会自动反向应用 - 别用
!important—— 用更具体的选择器就能赢过 Bootstrap 默认权重
用 JavaScript 动态控制动画时长是否可行
可以，但不推荐。Bootstrap 5 的 Modal 构造函数支持 animation 选项，但它只控制「是否启用 fade」，不接受毫秒数参数。所谓「传入 { animation: false }」只是关掉整个淡入效果，无法调速。
若真要 JS 控制，唯一办法是运行时注入 style：
document.documentElement.style.setProperty( '--bs-modal-fade-transform', 'translate(0)' ); // 但这绕不开 CSS transition，仍需配合覆盖 transition
所以 JS 方案本质上还是为 CSS 服务，纯 JS 调速不可行。
兼容性与移动端要注意什么
在 iOS Safari 和部分安卓 WebView 中，transform + opacity 过渡偶尔会卡顿，尤其当模态框内容复杂或有大量 DOM 节点时。此时单纯拉长动画时间（比如设成 0.5s）反而更容易被用户感知卡顿。
建议：
- 优先用
transform: translateZ(0)或will-change: opacity触发硬件加速（加在.modal-dialog上） - 避免在动画过程中操作
height或margin—— 这些会触发重排，拖慢整个过渡 - 如果项目已升级到 Bootstrap 5.3+，确认没意外启用了
data-bs-animation="true"（它会强制走 JS 动画逻辑，绕过 CSS，导致自定义 transition 失效）
最常被忽略的是：改了 CSS 后忘了清浏览器缓存，或者开发工具里看到样式被划掉却没检查 specificity 是否真的生效。
