bootstrap modal淡入淡出时长由css transition控制，js仅切换.show类；改animation选项无效，因bootstrap 5已移除该配置，必须精准覆盖.modal.fade .modal-dialog的transition规则并同步 backdrop，避免作用域污染。
直接改 CSS 的 transition，别碰 JS 的 show() 方法——Bootstrap Modal 的淡入淡出时长完全由 CSS 控制，JS 只负责加/删 .show 类，不参与计时。
为什么改 animation: 300 或 data-bs-animation="0.3s" 没用
Bootstrap 5 的 animation 选项只接受布尔值：true（启用 .fade 类）或 false（彻底移除 .fade，硬切显示）。传入数字、字符串或对象（如 { animation: '0.3s' }）会被静默忽略，控制台无报错，但无效。动画本身由浏览器根据 .modal.fade .modal-dialog 上的 transition 规则触发，JS 不解析毫秒数。
必须覆盖的 CSS 选择器和关键属性
不能只写 .fade { transition: opacity 0.3s ease; }——这会污染所有带 .fade 的组件（alert、tooltip、offcanvas），导致它们也变慢。要限定作用域：
-
.modal.fade .modal-dialog：设初始态的transition，例如transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out; -
.modal.fade.show .modal-dialog：确保目标态与初始态匹配，否则位移或淡入失效 -
.modal.fade .modal-backdrop：必须同步修改，否则遮罩层“啪”一下闪出，视觉撕裂 - 必须显式声明
transform和opacity，漏掉任一属性会导致动画残缺；别用transition: all，它会把margin、padding拖进动画，触发重排卡顿
移动端卡顿和 iOS Safari 闪动怎么缓解
单纯拉长时长（比如设成 0.5s）在旧 WebView 中反而更卡，因为 opacity + transform 过渡未触发 GPU 加速时会长时间占主线程：
- 给
.modal-dialog加transform: translateZ(0)或will-change: opacity，强制硬件加速 - 避免在动画过程中操作
margin、padding或display——这些会触发重排 - 检查开发者工具「Computed」面板，确认最终生效的
transition值确实来自你写的规则，而不是 Bootstrap 默认样式 - 确保自定义 CSS 文件引入顺序在 Bootstrap CSS 之后，否则你的覆盖规则无效
真正容易被忽略的是作用域控制——很多人花半小时调试 JS，结果发现只是 .fade 规则影响了 tooltip，导致页面其他地方动画也变慢了。
