必须显式为每个tab-pane添加fade类且默认项额外加show类，否则首屏空白或硬切；动画由CSS规则驱动，非JS控制，漏fade或show、CSS未加载全、.tab-content盒模型不稳均导致失效。
必须显式为每个 tab-pane 添加 fade 类，且默认激活项还得额外加 show 类；漏 show 导致首屏空白，漏 fade 则切换硬切——动画完全由 CSS 规则驱动，不是 JS 配置能打开的。
为什么加了 transition={true} 还是硬切？
React Bootstrap 或原生 Bootstrap 的 JS 层根本不控制淡入逻辑，它只负责切换 active 和 show 类。动画是否发生，只取决于 DOM 上有没有 fade 类，以及对应 CSS 是否生效。
-
fade是 CSS 动画的“开关”，不是修饰类——所有tab-pane元素初始就必须带它，一个都不能少 -
show才是让第一个面板可见的关键：仅缺show时，opacity: 0没被覆盖，内容就是透明的 - 写成
className="fade active"是常见错误；正确写法是className="fade show active" - 动态插入新
tab-pane（比如 AJAX 加载）后，JS 不会自动补fade，得手动加
为什么首屏空白或动画不触发？
根本原因几乎全是 CSS 加载或覆盖问题，不是 HTML 写错。
- 检查浏览器开发者工具里，
.tab-pane.fade的computed样式中是否有transition: opacity .15s linear和opacity: 0 - 用自定义构建、CDN 精简包，或 SCSS 单独
@import时，容易漏掉tab-pane.fade和.tab-pane.fade.show规则 - 如果用了 Emotion、Styled Components 等 CSS-in-JS 工具，确认
.fade相关样式没被 scope 隔离或重置为transition: none - 避免全局写
* { opacity: 1 !important }这类暴力规则，它会直接废掉过渡链
响应式下淡入“看不见”或高度跳变怎么办？
淡入依赖 opacity 变化可见，但响应式布局容易破坏渲染上下文。
-
.tab-content必须有明确宽度（哪怕width: 100%），不能靠内部 flex 子项撑开；设display: flex会导致tab-pane绝对定位失效 - 各面板内容高度差异大时，
.tab-content会塌陷或跳动——加min-height（如min-height: 300px）可缓解 - 缩略图等内嵌内容要用
img-fluid+ 栅格（如col-6 col-sm-4），否则尺寸失控会拉扯容器高度 - 父容器设
overflow: hidden或visibility: hidden会裁剪过渡过程，导致“动了但看不见”
最容易被忽略的是：动画失效时第一反应总想改 JS 参数，但真正要盯住的只有三样东西——DOM 上有没有 fade 类、CSS 里有没有生效的 .tab-pane.fade 规则、以及 .tab-content 的盒模型是否稳定。
