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