加了 fade 类但切换仍是硬切，是因为 fade 仅为 CSS 修饰符，需同时满足：Bootstrap CSS 完整加载、.tab-pane 确含 fade 类、无 display: none !important 等样式覆盖 show 的可见性。
为什么加了
类但切换还是硬切？
因为
类只是 CSS 修饰符，它本身不触发任何 JS 行为，也不自动生效——必须同时满足三个条件：Bootstrap CSS 文件已完整加载、对应
元素确实存在该类、且没有其他样式（比如
）强行覆盖
的可见性。
常见干扰项包括：
漏引
或用了精简版构建（
、
相关规则可能被剔除）
上写了
或父级设置了
自定义 CSS 里写了
，直接废掉
的过渡逻辑
必须同时有
和
吗？
不是全部都要，而是有明确分工：
所有
都必须带
—— 这是淡入淡出动画的“开关”
仅默认激活的那个
需要额外加
——
控制初始可见，
同步导航高亮
其余非激活项只需
，Bootstrap JS 会在切换时自动增删
和
错误写法：
fadefade.tab-panedisplay: none !important.showbootstrap.min.csscarousel-fadetab-pane.fade.tab-panestyle="display: none"visibility: hidden.tab-pane { opacity: 1 !important; }fadetab-panefadeshow active.tab-panefade.tab-paneshow activeshowactivefadeshowactive
—— 缺
show
，首次加载内容为空白；正确写法：
。
用 JS 手动触发
tab.show()
却没动画？
JS 方法本身不负责动画，它只负责切换类名。是否出现淡入效果，完全取决于目标
.tab-pane
是否已有
fade
类。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
动态插入的
.tab-pane
，必须在插入 DOM 后、调用
show()
前手动补上
fade
类
不要重复初始化
bootstrap.Tab
实例，否则报错
Tab already initialized
确保执行时机在 DOM 加载完成之后，例如包裹在
DOMContentLoaded
事件里
示例正确调用：
document.addEventListener('DOMContentLoaded', () => {
const triggerEl = document.querySelector('[href="#profile"]');
const tab = new bootstrap.Tab(triggerEl);
tab.show();
});
想换滑动或缩放动画，能改 JS 配置吗？
不能。Bootstrap 5 的 Tabs 切换逻辑不提供动画类型配置项，
show()
方法只操作
show
和
active
类，所有视觉过渡都由 CSS 控制。
要实现非淡入效果，只能覆盖
.tab-pane.fade
及其
.show
状态的样式：
删掉
opacity
相关声明，改用
transform: translateX(100%)
→
transform: translateX(0)
确保未激活项的初始状态不可见（如
transform: translateX(100%); opacity: 0
）
注意移动端性能：过度使用
transform
+
transition
可能在低端 Android 设备上掉帧
关键点：别试图从 JS 层替换动画，那条路走不通；CSS 是唯一入口，也是唯一出口。