bootstrap 5 模态框弹出速度由 css transition 控制，需通过 .modal.fade .modal-dialog 选择器覆盖 opacity 和 transform 的 transition 属性，缺一不可。
弹出速度由 CSS transition 控制，不是 JS 参数
Bootstrap 5 的 .modal 淡入动画根本不由 JavaScript 配置项控制，animation 选项只接受布尔值（true/false），传毫秒数或数字会直接被忽略。所谓“调速”，本质是覆盖 .fade 类里声明的 transition 属性。
.modal.fade .modal-dialog 是安全覆盖点
直接改 .fade 会影响所有带该类的组件（alert、tooltip、dropdown），导致意外动画。必须限定作用域：
-
.modal.fade .modal-dialog—— 推荐，只影响模态框主体的淡入/缩放过渡 -
.modal.show .modal-dialog—— 可选，仅控制显示态，但需同步调整初始.fade状态 - 避免用
!important，用更具体的选择器即可压过 Bootstrap 默认权重
示例（延至 300ms）：
.modal.fade .modal-dialog {
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
别漏掉 transform，否则缩放动画失效
默认动画同时依赖 opacity 和 transform（如 translate(0) 或 scale(0.95)）。只改 opacity 的 transition，会导致模态框“淡入但不居中”或“卡在缩小状态”：
- 必须写全属性：
transition: opacity 0.3s ease-out, transform 0.3s ease-out - 若想换入场效果（如从顶部滑入），要同步重写
.modal.fade .modal-dialog的初始transform（如transform: translateY(-20px)）和.modal.show .modal-dialog的目标值 - GPU 加速可缓解旧浏览器卡顿：
transform: translateZ(0)或will-change: transform
JS 动态注入 style 不解决根本问题
有人试图用 document.documentElement.style.setProperty() 改 CSS 变量，但 Bootstrap 5 并未暴露动画时长为 CSS 变量（如 --bs-modal-fade-duration）。所有运行时 JS 修改最终仍要落地到 transition 声明上，不如直接写 CSS 稳定。
真正容易被忽略的是：动画是否生效，取决于 .fade 类是否存在、.show 类是否被正确添加、以及 transition 是否被更高优先级规则覆盖——三者缺一不可。哪怕只漏写一个 transform，你看到的就只是“慢半拍的透明度变化”。
