必须给每个tab-pane加fade类，且默认项额外加show类；缺fade则切换硬切，缺show则首屏空白。fade仅提供css过渡钩子（opacity:0+transition），show才触发opacity:1实现可见，二者缺一不可。

必须给每个 tab-pane 加 fade 类，且默认激活项额外加 show——缺一不可，否则动画不触发或首屏空白。

为什么加了 fade 类还是硬切？

因为 fade 不是“启用动画”的开关，而是 CSS 动画的钩子；它本身只定义 opacity: 0 和 transition: opacity .15s linear，但没 show 就永远停在 opacity: 0。常见错误包括：

• <div class="tab-pane fade"> —— 缺 <code>show，首屏内容不可见
• <div class="tab-pane fade active"> —— <code>active 控制导航高亮，不控制内容显隐，仍空白
• 只给第一个 tab-pane 加 fade，其余没加 → 切换到那些面板时直接硬切
• 用了自定义构建的 Bootstrap CSS，漏掉了 .tab-pane.fade 规则

怎么写才对：HTML 结构与类名组合

Bootstrap 5 的淡入淡出完全由 CSS 类驱动，JS 只负责增删 show 和 active。正确写法有严格分工：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 所有 tab-pane 元素都必须带 fade 类（一个都不能少）
• 默认激活的那个，要同时有 fade、show、active：<div class="tab-pane fade show active" id="home"> <li>其他非默认项，只需 <code>fade：<div class="tab-pane fade" id="profile"> <li>别手动给非默认项加 <code>show，否则多个面板会同时显示

怎么改动画时长或禁用？只动 CSS，别碰 JS

想调慢淡入速度、换成 ease-in-out，或者彻底禁用，都不需要改 JS 配置或传参。直接覆盖 CSS：

• 改时长和缓动：.tab-pane.fade { transition: opacity 0.25s ease-in-out; }
• 禁用动画：.tab-pane.fade { transition: none; }（注意：不是移除 fade 类，否则可能影响可见性逻辑）
• 如果用了 CSS-in-JS（如 Emotion），确认没把 .tab-pane.fade 的 transition 重置为 none
• 避免父容器设 overflow: hidden 或 height 固定值，否则淡出过程会被裁剪

最容易被忽略的是：动画是否生效，90% 以上取决于 .tab-pane.fade 对应的 CSS 规则有没有真正加载进页面——检查开发者工具中该元素的 computed 样式，确认 transition 和 opacity 值是否如预期，而不是反复调试 JS 调用逻辑。