根本原因是DOM状态与CSS动画类不匹配，需确保tab-pane默认项同时含fade、show、active，其他项仅需fade；动态插入时须手动添加fade类，自定义动画只改.tab-pane.fade的CSS。
bootstrap 选项卡切换时页面闪烁，根本原因不是 js 切换逻辑出错，而是 dom 状态与 css 动画类不匹配导致的视觉跳变。最常见、最直接的解法是补全 fade 和 show 类，且必须按规则分配。
tab-pane 必须同时有 fade + show（仅默认项）
Bootstrap 5 完全移除了 JS 驱动的过渡，动画完全依赖 CSS 类组合。如果第一个 tab-pane 只加了 fade 没加 show，初始内容为空白；如果加了 show 却漏掉 fade，切换时就是硬切——两种情况都会在激活/非激活态切换瞬间造成内容闪现或消失。
-
tab-pane默认激活项：必须同时含fade、show、active - 其他
tab-pane：只需fade（JS 会自动增删show和active） - 漏掉 Bootstrap 的 CSS 文件（尤其是
transition相关样式）也会让fade失效，表现为“加了类但没动画”
动态插入 tab-pane 时 fade 类不能晚于 show() 调用
用 JS 异步加载内容后插入 DOM，再调用 bootstrap.Tab.getInstance(el).show()，很容易忽略一点：Bootstrap 的 JS 不会自动给新插入的 tab-pane 补 fade 类。它只管切 show/active，动画是否生效全看 DOM 上有没有 fade。
- 插入
tab-pane元素后，立即手动加fade类：newPane.classList.add('fade') - 若该 pane 是默认激活项，额外加
show和active - 再调用
.show()，否则仍是硬切 - 别指望
shown.bs.tab事件帮你补类——它只通知“已切完”，不负责修复 DOM
自定义动画时别动 JS，只改 .tab-pane.fade 的 CSS
Bootstrap 的 Tabs JS 不提供动画钩子或配置项，所有过渡效果都由 .tab-pane.fade 的 CSS 控制。想换成滑入、缩放等效果，只能覆盖这个选择器及其 .show 状态。
- 必须保留
opacity: 0初始值，否则未激活 pane 会意外可见 - 要定义
.tab-pane.fade.show的终态，比如transform: translateX(0); opacity: 1; - 移动端慎用
transform: translateZ(0)强制硬件加速，低端机可能卡顿 - 不要删掉
transition声明，否则连淡入淡出都会失效
最容易被忽略的是：即使你写了完美的 CSS 动画，只要某个 tab-pane 元素上缺了 fade 类，Bootstrap 就当它不需要过渡——JS 不报错，DOM 不提醒，只留下一闪而过的困惑。
