Bootstrap选项卡淡入效果需所有tab-pane加fade类、默认项额外加show和active，且必须加载完整CSS并配transition；缺一即硬切或空白。
bootstrap 选项卡默认不带淡入淡出效果，必须显式添加 fade 类并确保 show 类仅出现在当前激活的 tab-pane 上，否则要么空白、要么硬切、要么多个面板同时显示。
每个 tab-pane 都得加 fade 类
不是只给第一个加，也不是只在 JS 切换时动态加——所有 tab-pane 元素初始 HTML 就必须含 fade。它本身不控制显隐，只是为 CSS 过渡提供钩子。漏掉任意一个，对应面板切换时就会“啪”一下硬切。
-
fade必须和tab-pane同级，不能只写在tab-content容器上 - 动态插入新面板（比如 AJAX 加载）后，得手动给新
tab-pane补fade类，否则切换无动画 - 如果用了自定义构建或精简版 Bootstrap CSS，确认
.tab-pane.fade规则没被剔除（尤其注意 carousel-fade、tab-pane.fade 是否在打包产物中）
默认激活项必须同时有 fade show active
只加 fade 和 active，内容仍不可见——因为 fade 默认设 opacity: 0，show 才触发 opacity: 1 并启动过渡。缺了 show，首屏就是空白。
- 错误写法：
<div class="tab-pane fade active"> → 初始不可见 <li>正确写法：<code><div class="tab-pane fade show active" id="home"> <li>其他非默认项只需 <code>fade，不要加show；Bootstrap JS 切换时会自动增删show和active - 用 JS 手动激活（如
bootstrap.Tab.getInstance(el).show()）前，目标tab-pane必须已含fade类，否则动画不触发 - 检查浏览器开发者工具里，
.tab-pane.fade的transition是否生效（默认是opacity .15s ease-in-out）；没生效说明 CSS 未加载或被覆盖 - 父容器（如
.tab-content）不能设overflow: hidden或固定height，否则淡出过程可能被裁剪 - 避免写
style="display: none"或!important覆盖.show的opacity: 1，这会直接废掉过渡 - 如果用了 CSS-in-JS 或主题包，确认
.tab-pane.fade的transition没被设成none - 修改淡入时长：写
.tab-pane.fade { transition: opacity 0.3s ease; }，别碰 JS 层的transition属性（React Bootstrap 里那个是控制 TransitionGroup，不是动画本身） - 禁用动画：移除所有
tab-pane的fade类，并设transition={false}（仅 React Bootstrap 场景） - 换滑动动画：删掉
fade类，改用transform+transition，但必须同步移除fade，否则 CSS 和 JS 动画打架
必须加载完整 Bootstrap CSS 且无样式覆盖
即使类名全对，若 CSS 没生效，动画照样失效。常见干扰来自 display、opacity 或 transition 被重置。
响应式下动画仍要靠 CSS 控制，不是 JS 配置
Bootstrap 不提供 data-bs-transition-type="fade" 这类开关，淡入淡出完全由 CSS 类驱动。想改时长或缓动函数，只能覆盖样式，不能调 JS 参数。
最容易被忽略的是：fade 类本身不带 transition 声明，Bootstrap 官方 CSS 里是单独写的；如果你只复制了 HTML 结构却没引入完整 CSS，或者用了旧版 CDN 链接，动画就永远不会启动。
