改animation: 300没用是因为bootstrap 5的animation选项仅接受布尔值（true/false），传入数字、字符串或对象会被静默忽略；动画时长实际由css的.modal.fade .modal-dialog的transition属性控制，js只负责添加.show类。
为什么改 animation: 300 没用
Bootstrap 5 的 Modal 构造函数确实接受 animation 选项，但它只认布尔值：true（启用 .fade 类）或 false（彻底移除 .fade，硬切显示）。传入 { animation: 300 }、'0.3s' 或对象会被静默忽略——控制台不报错，但动画时长不会变。动画实际由 CSS 的 transition 驱动，JS 只负责同步添加 .show 类。
必须覆盖的 CSS 选择器和属性
不能只写 .fade { transition: opacity 0.3s ease; }——这会把所有带 .fade 的组件（alert、tooltip、offcanvas）都拖慢。要精准限定作用域：
-
.modal.fade .modal-dialog：设初始态，如opacity: 0、transform: translateY(-20px) -
.modal.fade.show .modal-dialog：设目标态，opacity: 1、transform: translateY(0) - 两处都必须显式声明
transition，例如：transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out - 自定义 CSS 文件必须在 Bootstrap CSS 之后加载，否则规则被覆盖
移动端卡顿和 iOS Safari 闪动怎么缓解
单纯拉长动画时间（比如设成 0.5s）在旧 WebView 或 iOS Safari 中反而更卡，因为 opacity + transform 过渡未触发硬件加速时会长时间占主线程：
- 给
.modal-dialog加transform: translateZ(0)或will-change: opacity，强制 GPU 渲染 - 避免在
.modal-dialog上设置margin、padding或display动画——这些会触发重排 - 检查
.modal-backdrop的transition是否与.modal-dialog完全一致，否则视觉撕裂 - 用浏览器开发者工具「Computed」面板确认最终生效的
transition值从哪来，比猜更可靠
想禁用淡入动画，最稳的方式是什么
不是调 animation: false，也不是设 data-bs-backdrop="static"，而是——删掉 HTML 中的 fade 类。只要模态框根元素没有 class="modal fade"，JS 调用 show() 就只会硬切（display: block 瞬间出现）。data-bs-backdrop="static" 只影响遮罩层行为，和动画无关。
真正容易被忽略的是作用域控制：很多人花半小时调试 JS，结果发现只是 .fade 规则影响了 tooltip，导致页面其他地方动画也变慢了。盯住「Computed」面板，看 transition 到底从哪条规则来，这事关成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
