必须给每个tab-pane都加fade类，缺一则硬切；默认项须同时含fade、show、active三类，否则首屏空白；动画由css的opacity+transition实现，非js控制，且所有fade类须初始html存在。
必须给每个 tab-pane 都加 fade 类，缺一个就硬切；默认项还得同时带 show 和 active，否则首屏空白。
所有 tab-pane 必须初始就含 fade 类
Bootstrap 的淡入淡出不是 JS 控制的动画，而是靠 .tab-pane.fade 的 opacity + transition 实现。这个类必须在 HTML 初始渲染时就存在——不是只给第一个加，也不是靠 JS 动态补。
- 漏掉任意一个
tab-pane的fade，对应面板切换时就会“啪”一下跳变，毫无过渡 - AJAX 插入新面板后，得手动给新
tab-pane补fade，JS 不会自动加 - 用了自定义构建或精简版 Bootstrap CSS，
.tab-pane.fade规则可能被剔除 → 即使类名全对，动画也失效
默认激活项必须同时有 fade、show、active 三类
三者职责不同，不能互相替代：
-
fade提供过渡钩子（设opacity: 0+transition） -
show才真正让内容可见（覆盖opacity: 0→opacity: 1） -
active同步导航高亮状态
错误写法：<div class="tab-pane fade active"> → 首屏空白，因为缺 <code>show，opacity 仍是 0。
正确写法：<div class="tab-pane fade show active" id="home">
<h3>检查 .tab-pane.fade 的 transition 是否生效</h3>
<p>即使类名全对、CSS 文件也引入了，动画仍可能失效——大概率是外部样式覆盖或渲染上下文干扰。</p>
<ul>
<li>打开浏览器开发者工具，选中任意 <code>tab-pane 元素，看 computed 样式里是否有 transition: opacity .15s ease-in-out
* { opacity: 1 !important }）.tab-content 别设 overflow: hidden 或固定 height，否则淡出过程会被裁剪style="display: none" 或 !important 覆盖 .show 的 opacity: 1，这会直接废掉过渡响应式缩略图布局要防高度跳变
带缩略图的选项卡，淡入效果容易被视觉“弹跳”破坏——这不是动画问题，而是各 tab-pane 内容高度不一致导致父容器 .tab-content 高度塌陷或突变。
- 给
.tab-content加min-height（如min-height: 300px），防止首屏加载时高度收缩 - 缩略图外层必须包
<div class="col-6 col-sm-4 col-md-3">，不能裸放 <code><img> -
<img>必须加img-fluid，否则小屏下溢出或拉伸变形 - 避免用已移除的
.thumbnail类，它无响应逻辑且和fade动画冲突
最容易被忽略的是：动画失效时第一反应总想改 JS 参数，但真正要盯住的只有三样东西——DOM 上有没有 fade 类、CSS 里有没有生效的 .tab-pane.fade 规则、以及 .tab-content 的盒模型是否稳定。
