TabPane必须显式添加fade类，且默认激活项还需额外加show类，否则动画不触发；漏show导致首屏空白，漏fade则切换硬切，动画完全依赖CSS规则而非JS控制。
TabPane 必须显式加 fade 和 show 类，否则动画不触发
bootstrap 5 的选项卡默认是硬切，fade 不是自动启用的修饰类，而是动画的 css 钩子。只设 transition={true} 或只加 fade 类都不够——每个 tabpane 必须带 fade，且默认激活的那个还得额外加 show（不是 active）。漏掉 show，第一个面板内容就空白；漏掉 fade，切换时就“啪”一下跳变。
-
TabPane渲染出的div必须有class="fade"，React Bootstrap 不会自动加 - 初始激活项：写成
className="fade show"（show控制可见性，active是导航高亮，二者职责不同） - 非初始项：只需
className="fade"，Bootstrap JS 切换时会自动增删show - 别用
style={{ opacity: 1 }}覆盖，会打断 CSS transition 流程
必须加载完整 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 - 避免父容器设
overflow: hidden或visibility: hidden，会裁剪或屏蔽过渡过程
响应式下动画失效？重点查 .tab-content 宽度与定位
淡入淡出依赖 opacity 变化可见，而响应式布局中，如果 .tab-content 或其子元素宽度塌陷、高度未撑开、或触发了 BFC/层叠上下文异常，动画可能“动了但看不见”。这不是 JS 问题，是渲染层干扰。
-
.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 过渡 - 媒体查询中不要覆盖
.tab-pane.fade的transition属性，尤其别写成transition: none
想改淡入时长或禁用动画？直接操作 CSS，别碰 JS 配置
Bootstrap 的 fade 动画完全由 CSS 控制，JS 层（包括 React Bootstrap 的 transition prop）只管切换类名。修改动画参数必须走 CSS 覆盖路径，否则无效。
- 延长淡入时间：
.tab-pane.fade { transition: opacity 0.35s ease-in-out; } - 彻底禁用动画：移除所有
TabPane的fade类，并设transition={false}（双保险，防 CSS 残留） - 替换为滑动效果：删掉所有
fade类，再自定义.tab-pane的transform和transition，否则 CSS 和 JS 动画会打架 - 性能注意：opacity + transition 是 GPU 可加速的，比频繁重排的 height 动画更轻量，但多个
tab-pane同时过渡时，留意低端设备重绘压力
tab-pane 的 height 可能因内容变化而抖动，导致淡入过程中出现“上跳”或“压扁”——这不是动画本身问题，而是父容器未设 min-height 或未用 contain: layout 隔离渲染影响。
