Bootstrap 5 的 Tab 动画由 CSS 控制，必须为每个 tab-pane 添加 fade 类并为默认项额外加 show 类；改动画时应覆盖 --bs-tab-transition 变量或自定义 .tab-pane.fade 样式，而非修改 JS 或全局 .fade。
bootstrap 5 的 tab 切换动画完全由 css 控制，js 只负责切换 show 和 active 类——想改动画，别碰 js 配置，直接改 css。
必须加 fade 类，否则一切过渡都无效
Bootstrap 默认不启用任何动画，fade 是淡入淡出的“开关”，不是可选修饰。漏掉它，哪怕写了再长的 transition 也白搭。
- 每个
tab-pane元素都必须带fade类 - 默认激活的那个，还得额外加
show（仅它需要，其他由 JS 自动处理） - 常见错误：
<div class="tab-pane">—— 没fade，硬切；<div class="tab-pane fade active">—— 缺show，初始空白 - 动态插入的
tab-pane，得在插入 DOM 后、调用show()前手动加fade类
改时长：优先覆盖 --bs-tab-transition 变量
Bootstrap 5.3+ 把标签页过渡统一锚定在 CSS 变量 --bs-tab-transition 上，改它最干净，不会波及 modal、alert 等共用 .fade 的组件。
- 全局改（推荐）：
:root { --bs-tab-transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; } - 局部改（比如只影响某个区域）：
.my-tabs { --bs-tab-transition: opacity 0.15s ease-out; } - 别直接改
.fade { transition: ... }—— 所有用了.fade的组件都会变慢，modal 弹窗也会跟着拖沓 - 值必须是完整
transition语法，不能只写0.3s；漏掉ease或属性名，动画就退化成瞬间切换
想换滑动/缩放？只动 .tab-pane.fade 的 CSS
Bootstrap 不提供动画类型配置项，所有视觉效果都靠覆盖 .tab-pane.fade 及其 .show 状态来实现。
- 基础写法（滑入）：
.tab-pane.fade { opacity: 0; transform: translateX(100%); transition: opacity 0.3s ease, transform 0.3s ease; } .tab-pane.fade.show { opacity: 1; transform: translateX(0); } - 关键点：未激活态必须不可见（
opacity: 0+transform偏移），否则会“透出”内容 - 父容器
.tab-content要加overflow: hidden，否则偏移内容会露出来 - 别给
.tab-pane设固定height，它会破坏自适应高度；用visibility: hidden辅助隔离渲染比display: none更安全
React Bootstrap 下动画失效？检查 DOM 类是否齐全
React Bootstrap 的 TabPane 不自动加 fade 和 show，全靠你手写。JS 层的 transition={true} 只控制 react-transition-group 的挂载逻辑，不解决类缺失问题。
- 正确写法：
<TabPane tabId="home" className="fade show">首页</TabPane> <TabPane tabId="profile" className="fade">资料</TabPane>
- 漏了
show→ 第一个面板空白；漏了fade→ 所有切换都是硬切 - 确保项目加载了完整的 Bootstrap CSS（特别是
tab-pane.fade相关规则），精简构建或 CDN 版本可能剔除了 transition 样式 - 自定义主题或 CSS-in-JS 工具里，确认没把
.tab-pane.fade的transition重置为none
最常被忽略的是：动画是否生效，和 JS 调用方式无关，只取决于 DOM 上有没有正确的类组合 + 对应的 CSS 规则是否被加载且未被覆盖。先查元素，再查样式表，最后看 JS —— 顺序错了，排查就绕远路。
