必须给每个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"> → 首屏空白，因为缺 show，opacity 仍是 0。
正确写法：<div class="tab-pane fade show active" id="home">
检查 .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，这会直接废掉过渡
响应式缩略图布局要防高度跳变
带缩略图的选项卡，淡入效果容易被视觉“弹跳”破坏——这不是动画问题，而是各 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动画冲突
最容易被忽略的是：动画失效时第一反应总想改 JS 参数，但真正要盯住的只有三样东西——DOM 上有没有 fade 类、CSS 里有没有生效的 .tab-pane.fade 规则、以及 .tab-content 的盒模型是否稳定。
