淡入淡出选项卡+缩略图能跑起来的关键是：所有tab-pane初始必须带fade类、默认项须同时含fade/show/active、缩略图需嵌套响应式栅格并加img-fluid；缺一即硬切、空白或跳变。
淡入淡出选项卡 + 缩略图能跑起来，关键不在 JS 配置，而在三件事：所有 tab-pane 初始就带 fade 类、默认项必须同时有 fade show active、缩略图必须嵌在响应式栅格里且加 img-fluid。漏掉任意一个，就会硬切、空白或跳变。
tab-pane 必须全部带 fade 类，一个都不能少
Bootstrap 的淡入淡出是纯 CSS 驱动的：tab-pane.fade 定义了 opacity: 0 和 transition: opacity .15s ease-in-out，但这个规则只对带 fade 类的元素生效。JS 层（比如 bootstrap.Tab.getInstance(el).show()）只负责增删 show 和 active，不补 fade。
- 常见错误：只给第一个
tab-pane写class="tab-pane fade"，其他没加 → 切换到那个面板时直接“啪”一下硬切 - AJAX 动态插入新面板后，必须手动给新
tab-pane加fade类，否则永远无动画 - 用自定义构建或精简版 CSS 时，检查打包产物里是否包含
.tab-pane.fade和.tab-pane.fade.show规则；漏掉就等于没动画开关 - 别把
fade写在tab-content容器上——它只对tab-pane生效
默认激活项必须同时含 fade、show、active
fade 提供过渡能力，show 才真正让内容可见（覆盖 opacity: 0），active 同步导航高亮。三者缺一不可，且职责不能互换。
- 错误写法：
<div class="tab-pane fade active"> → 首屏空白，因为没 <code>show，opacity 还是 0 - 正确写法：
<div class="tab-pane fade show active" id="home"> <li>非默认项只需 <code>fade，不要加show；Bootstrap JS 切换时会自动处理show的增删 - 用 JS 手动激活前，目标
tab-pane必须已含fade类，否则show()调用后动画不触发 - 每张缩略图外层必须包裹响应式列容器，例如：
<div class="col-6 col-sm-4 col-md-3"><img src="..." class="img-fluid"></div> -
img标签必须加img-fluid，否则小屏下溢出或拉伸变形，拉扯父容器高度 - 给
.tab-content加min-height: 300px（按实际内容调整），防止首屏加载时高度收缩 - 避免用已移除的
.thumbnail类——它无响应逻辑，且和fade动画冲突 - 如果缩略图带文字说明，用
<figure><img><figcaption></figcaption></figure>比.card更轻量、DOM 更干净 - 打开开发者工具，选中任意
tab-pane元素，看 computed 样式里是否有transition: opacity .15s ease-in-out和opacity: 0（未激活态） - 确认没全局重置规则，比如
* { opacity: 1 !important }或transition: none -
.tab-content别设overflow: hidden或固定height，否则淡出过程会被裁剪 - 如果用了 CSS-in-JS（如 Emotion、Styled Components），确保
.tab-pane.fade相关样式没被 scope 隔离或重置 - 别写
style="display: none"或!important覆盖.show的opacity: 1，这会直接废掉过渡链
缩略图必须套响应式栅格 + img-fluid，否则高度跳变
淡入动画本身没问题，但缩略图尺寸失控会导致 tab-content 高度塌陷或突变，视觉上就像动画“断掉”或内容“弹跳”。这不是动画失效，而是盒模型不稳定。
动画失效时优先查 CSS 是否真生效
90% 的“加了类没动画”问题，根源不是 HTML 写错，而是 CSS 没加载全或被覆盖。JS 层根本不管动画逻辑，只管类名切换。
最容易被忽略的是：动画出问题时第一反应总想改 JS 参数或加 transition 属性，但真正要盯住的只有三样东西——DOM 上有没有 fade 类、CSS 里 .tab-pane.fade 规则有没有生效、.tab-content 的盒模型是否稳定。缩略图布局松散、CSS 被第三方库覆盖、自定义构建漏规则，这些比 JS 写错更难排查。
