Bootstrap模态框淡入时长由CSS的.fade类transition控制，JS仅添加.show类不参与计时；animation选项只接受布尔值，传毫秒数无效；必须用.modal.fade .modal-dialog选择器覆盖transition，避免污染其他组件。
直接改 css，别碰 js 的 show() 参数——淡入时长由 .fade 类的 transition 控制，js 只负责加类，不参与计时。
为什么改 new bootstrap.Modal(el, { animation: true }) 没用
Bootstrap 5 的 animation 选项只接受布尔值：true（启用 .fade 类）或 false（彻底移除 .fade，硬切显示）。它不接收毫秒数、持续时间对象或缓动函数。传 { animation: '0.3s' } 会被忽略，控制台无报错，但无效。
- 动画实际由浏览器对
.modal.fade .modal-dialog的opacity和transform变化触发，纯 CSS 驱动 -
show()方法只是同步添加.show类，让已存在的.fade规则生效 - 若 HTML 中没写
class="modal fade"，哪怕 JS 配置再全，动画也根本不会启动
必须覆盖的 CSS 选择器和关键属性
不能只写 .fade { transition: opacity 0.3s ease; }——这会污染所有带 .fade 的组件（alert、tooltip、offcanvas），导致它们也变慢。要限定作用域：
- 目标选择器：
.modal.fade .modal-dialog（入场起始态）和.modal.fade.show .modal-dialog（入场结束态） - 必须显式声明
transition，不能用all：例如transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out; - 初始态需设
opacity: 0和位移（如transform: translateY(-20px)），否则第一帧会跳变 - 最终态在
.show下恢复opacity: 1和transform: translateY(0)
移动端卡顿和 iOS Safari 闪动怎么缓解
单纯拉长动画时间（比如设成 0.5s）在旧 WebView 中反而更卡，因为 opacity + transform 过渡未触发硬件加速时会长时间占主线程。
- 给
.modal-dialog加transform: translateZ(0)或will-change: opacity，强制 GPU 加速 - 避免在动画过程中操作
margin、padding或display——这些会触发重排，拖慢整个过渡 - 检查
.modal-backdrop是否同步：它的.fade和.show时长必须与.modal-dialog完全一致，否则视觉撕裂 - 用浏览器开发者工具「Computed」面板确认最终生效的
transition值从哪来，比猜更可靠
想禁用淡入动画，最稳的方式是什么
不是设 data-bs-backdrop="static"，也不是调 animation: false，而是——删掉 HTML 中的 fade 类。
- 只要模态框根元素没有
class="modal fade"，JS 调用show()就只会硬切（display: block瞬间出现） -
data-bs-backdrop="static"只影响遮罩层行为（点击不关闭），和动画无关 - 动态移除：
document.getElementById('myModal').classList.remove('fade')，但必须在show()前执行 - 判断依据永远是开发者工具里看 DOM 上有没有
.fade——有，就有动画；没有，就一定没
