应直接修改 CSS 变量 --bs-tab-transition，因其专为标签页过渡设计且被内部多处复用；需在 :root 或特定容器下完整声明 transition 语法，避免影响其他组件或兼容性问题。
修改 tab-pane 切换动画时长的 CSS 变量
bootstrap 5+ 默认用 css 过渡控制 tab-pane 显隐，核心是 opacity 和 transform 的 transition 属性。直接改 --bs-tab-transition 这个 css 变量最稳妥，它被 bootstrap 内部多个过渡规则复用。
- 在
:root或.nav-tabs父容器下重定义该变量，例如：:root { --bs-tab-transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } - 若只希望局部生效（比如某个特定标签页区域），给外层加 class（如
my-tabs），然后写.my-tabs { --bs-tab-transition: opacity 0.1s ease-out; } - 注意：值必须包含完整 transition 属性语法，不能只写
0.3s；漏掉ease类函数或属性名会导致过渡失效，退化为瞬间切换
为什么直接覆盖 .fade 类的 transition 不可靠
Bootstrap 的 tab-pane 默认带 .fade 类，其过渡依赖 .fade 的全局样式。但这个类也被 modal、alert 等组件共用，硬改 .fade 的 transition 会影响其他组件行为。
- 常见错误：在 CSS 里写
.fade { transition: opacity 0.4s !important; }—— 结果所有模态框淡入也变慢了 - 更糟的是，Bootstrap 5.3+ 开始把
.fade的过渡逻辑拆进 JS，部分场景会忽略纯 CSS 覆盖 - 正确做法是优先走
--bs-tab-transition变量，它是专为标签页过渡设计的锚点
JS 手动触发切换时，过渡时间是否还生效
只要没禁用 fade 效果，JS 调用 bootstrap.Tab.show() 或 $('#myTab a[href="#profile"]').tab('show') 依然走 CSS 过渡，--bs-tab-transition 生效。
- 确保
tab-pane元素同时有.fade和.show（或仅.fade，由 JS 控制显隐） - 如果手动移除了
.fade类（比如为了禁用动画），那任何 CSS 过渡设置都无效 - 不推荐用 JS 改
style.transition动态控制——和 Bootstrap 的 class 切换逻辑冲突，容易出现闪动或卡顿
IE11 或旧版浏览器里过渡失效怎么办
Bootstrap 5 官方已放弃 IE11 支持，但若项目仍需兼容，--bs-tab-transition 变量不会被识别，必须回退到传统 CSS 覆盖。
- 对
.tab-content .tab-pane.fade显式写死 transition：.tab-content .tab-pane.fade { transition: opacity 0.25s linear; } - IE11 不支持
transform过渡，去掉transform部分，否则整个 transition 规则可能被忽略 - 别忘了加
.in类兼容（Bootstrap 4 的遗留类），有些老项目混用 BS4/BS5 时会漏掉这个判断
--bs-tab-transition，且只在需要的上下文里定义。
