必须显式为每个TabPane添加fade类，且默认激活项还需额外加show类；漏show导致首屏空白，漏fade则切换硬切，动画依赖CSS规则而非JS控制，须确保Bootstrap完整CSS加载。
TabPane 必须显式加 fade 和 show 类
bootstrap 5 的 tabs 默认是硬切，fade 不是自动启用的修饰类，而是 css 动画的触发钩子。只设 transition={true} 或只加 fade 类都不够——每个 tabpane 渲染出的 <div class="tab-pane"> 必须带 <code>fade，且默认激活的那个还得额外加 show（不是 active）。
- 漏掉
show：第一个面板内容空白（opacity: 0但没被设为1） - 漏掉
fade：切换时“啪”一下跳变，无过渡 - 错误写法：
className="fade active"→ 缺show，首屏不可见 - 正确写法（默认项）：
className="fade show active"；非默认项：className="fade"
确保 Bootstrap CSS 完整加载，尤其 .tab-pane.fade 规则
常见“加了类也没动画”的根本原因，是 CSS 没加载全。比如用自定义构建、CDN 精简包，或从 SCSS 单独 @import 时漏掉了 tab 相关模块，.tab-pane.fade 和 .tab-pane.fade.show 这些关键规则就会缺失。
- 检查浏览器开发者工具中，选中
tab-pane元素，看 computed 样式里是否有transition: opacity .15s linear和opacity: 0（未激活态） - 确认引入的是完整版
bootstrap.min.css，不是仅含 grid 或 utilities 的子集 - 若用 CSS-in-JS（如 Emotion、Styled Components），需确保
.tab-pane.fade的transition没被重置为none
响应式下动画失效？重点查 .tab-content 宽度与定位
淡入淡出依赖 opacity 变化可见，而响应式布局中，如果 .tab-content 或其子元素宽度塌陷、高度未撑开、或触发了 BFC/层叠上下文异常，动画可能“动了但看不见”。
-
.tab-content必须有明确宽度（哪怕width: 100%），不能依赖内部浮动或 flex 子项撑开 - 避免在
.tab-content上设display: flex或grid，它应保持block流，否则tab-pane的绝对定位或visibility行为会错乱 - 小屏下如果用了
col-12或flex-column布局，确认没有意外给tab-pane加min-height: 0或overflow: auto，这些会截断opacity过渡 - 避免父容器设
overflow: hidden或visibility: hidden，会裁剪或屏蔽过渡过程
动态插入 TabPane 时，必须手动补 fade 类
用 JS 或 React 异步加载新标签页后，TabPane 节点插入 DOM 时不会自动带 fade 类。此时调用 tab.show() 或切换状态，依然硬切——因为 Bootstrap JS 只操作 show/active，不负责注入 fade。
- 插入 DOM 后、触发切换前，必须手动给新
tab-pane元素添加fade类 - 不要重复初始化
bootstrap.Tab实例，否则报错Tab already initialized - 确保执行时机在 DOM 加载完成之后，例如包裹在
DOMContentLoaded事件里 - React 场景下，可在组件
useEffect中查询并补类，或直接在 JSX 中静态写出className="fade"
fade 是开关，show 是扳机，二者缺一不可，且必须由你亲手写进 DOM。
