直接加 fade 类没反应，是因为 fade 仅定义 opacity 和 transition，必须配合 show 类（触发 opacity:1）才能生效；默认激活项需同时有 fade、show、active，其余项只需 fade，且须确保 css 完整加载、无样式覆盖。
为什么直接加 fade 类没反应？
Bootstrap 5 的选项卡默认不启用淡入淡出动画，即使你给 <div class="tab-pane fade"> 加了 <code>fade 类，也只会隐藏（display: none），不会自动触发过渡——因为缺了关键的 show 类和对应的 CSS 过渡声明。
真正起作用的是 fade + show 组合，且必须确保父容器（如 .tab-content）没有阻止过渡的样式（比如 overflow: hidden 裁剪了过渡区域）。
-
fade类本身只定义了opacity: 0和transition: opacity .15s linear，但初始状态不可见 - 切换时 Bootstrap JS 会移除上一个
show，再给当前tab-pane同时添加fade和show——此时opacity从 0 变为 1，动画才生效 - 如果手动用 JS 切换但忘了加
show，或用了addClass('fade')却没触发重排，动画就不会启动
如何正确初始化带 fade 的 tab-pane？
必须让每个 tab-pane 元素同时拥有 fade 和 show（仅对默认激活项），非激活项只需 fade（不加 show）。
错误写法：<div class="tab-pane fade show"> 放在所有 pane 上 —— 这会导致多个 pane 同时显示；正确写法是只在默认激活项上加 <code>show。
- 默认激活项：
<div class="tab-pane fade show active"> <li>其他项：<code><div class="tab-pane fade">（不能带 <code>show） - 确保
.tab-content没有height或overflow限制，否则淡出时可能被截断 - 如果用 JS 手动激活，要用
bootstrap.Tab.getInstance(...).show()，而不是直接addClass('show')—— 否则过渡类（如fade）的添加时机不对
自定义淡入速度或 easing 怎么改？
Bootstrap 5 的 fade 类用的是 transition: opacity .15s linear，时间短、线性过渡，常显得生硬。想调慢或改缓动，不能覆盖整个 fade 类（会破坏 JS 行为），而是用更具体的 CSS 覆盖。
推荐方式：给 .tab-content 下的 .tab-pane 单独写过渡规则，优先级更高，且不影响其他 fade 使用场景。
.tab-content .tab-pane.fade {
transition: opacity .3s ease-in-out;
}
- 不要改
.fade全局定义，否则会影响 modal、alert 等其他组件 - 如果想让淡入淡出时内容高度也参与动画（避免跳动），需额外配合
height和overflow动画，但 Bootstrap 原生不支持；更稳妥的做法是固定.tab-content高度，或用visibility+opacity替代display - 注意 Safari 对
opacity过渡偶尔有渲染延迟，可加transform: translateZ(0)强制硬件加速
Tab 切换后内容错位或闪一下？
这是最常见的视觉 bug：新 pane 淡入瞬间，页面高度突变，导致下方内容上跳，或者旧内容残留一帧。
根本原因是 tab-pane 默认是 display: block 切换，而 fade 动画依赖 opacity，但 display 变化是瞬间的，两者不同步。
- 确保所有
tab-pane都设了position: relative（Bootstrap 默认已有），避免绝对定位子元素脱离文档流引发错位 - 如果 pane 内有图片或异步加载内容，淡入开始时高度为 0，等资源加载完才撑开，就会“先淡入透明块，再突然撑高”——解决方法是在
img上加height属性或使用aspect-ratio占位 - 极少数情况是父容器有
contain: layout或will-change干扰了重绘，临时去掉可验证
淡入淡出不是加个 class 就完事，关键是 fade 和 show 的配合时机、CSS 过渡的可控范围，以及内容自身是否具备可动画的高度稳定性。
