Bootstrap 5 的 Tabs 默认无动画，需手动为 tab-pane 添加 fade 类，且首个 pane 还须加 show 才能显示初始内容；动画完全依赖 CSS，JS 不参与过渡控制。
Bootstrap 5 的 Tabs 默认不带动画，fade 类必须手动加
bootstrap 5 移除了所有 javascript 驱动的过渡效果，默认 tabs 切换是硬切（无淡入淡出、滑动等）。想让内容区有淡入淡出效果，必须显式给每个 <div class="tab-pane"> 加上 fade 类，且**第一个 tab-pane 还得额外加 show** —— 否则初始内容不显示。
常见错误现象：fade 没加，或只加了 fade 没加 show，导致切换时内容闪现、空白、或始终不出现。
-
tab-pane必须同时有fade和show（仅默认激活项）才能正确渲染初始状态 - 非激活的
tab-pane只需fade，Bootstrap JS 会自动加/删show和active - 如果用了
fade却没生效，检查是否漏了 Bootstrap 的 CSS 文件（尤其是transitions相关样式）
<div class="tab-content"> <div class="tab-pane fade show active" id="home">首页内容</div> <div class="tab-pane fade" id="profile">资料页内容</div> </div>
自定义切换动画只能靠 CSS 覆盖 .fade，不能改 JS 行为
Bootstrap 的 Tabs 切换逻辑由 bootstrap.bundle.js 控制，它只负责切换 show/active 类和控制 aria-hidden，**不提供钩子函数或配置项来替换动画类型**。想换滑动、缩放、左右平移等效果，只能重写 .fade 及其子类的 CSS。
使用场景：设计要求 Tab 内容从右滑入，或带轻微缩放入场。
- 覆盖
.tab-pane.fade的opacity、transform、transition属性即可 - 注意要同时定义
.tab-pane.fade.show的终态样式（例如transform: translateX(0)） - 别删掉
opacity: 0初始值，否则未激活 pane 会意外可见 - 移动端要注意
transform触发硬件加速，但过度使用可能影响低端机性能
用原生 JS 手动触发切换时，show 方法不会自动加 fade 动画
调用 new bootstrap.Tab(document.querySelector('#myTab a[href="#profile"]')).show() 或 bootstrap.Tab.getInstance(el).show()，只是模拟点击行为，它依赖 DOM 上已有的 fade 类来决定是否启用 CSS 过渡 —— JS 本身不注入任何动画逻辑。
容易踩的坑：代码里调用了 show()，但对应 tab-pane 没加 fade，结果还是硬切。
- 确保目标
tab-pane元素存在fade类，哪怕它是动态插入的 - 如果
tab-pane是异步加载的，要在插入 DOM 后、调用show()前补上fade类 - 不要指望
shown.bs.tab事件能帮你“补动画”，它只是通知切换完成
Bootstrap 4 和 5 在 Tabs 动画上的关键差异点
如果你从 v4 升级上来，最直接的断裂点就是：v4 的 fade 是可选但默认启用过渡的（靠 JS 控制），而 v5 完全交还给 CSS，且 fade 类成了强制前提。
性能影响：v5 更轻量，动画完全走 CSS，不依赖 JS 计时器；但兼容性上，IE11 对 transform + transition 组合支持不稳定，若需兼容，建议降级用 v4 或自行 polyfill。
- v4 中
data-fade="true"属性可开启淡入，v5 已废弃该属性 - v5 的
tab-pane必须有id，且href或data-bs-target必须严格匹配，否则fade类不会被 JS 正确关联 - 用构建工具（如 Webpack）时，确保引入的是
bootstrap/dist/css/bootstrap.min.css，而不是精简版（可能剔除了fade相关样式）
真正麻烦的不是加几行 class，而是团队里有人改了 CSS 却忘了同步更新所有 tab-pane 的 class 组合 —— 这种问题上线后很难一眼发现。
