tab-pane 必须显式添加 fade 类才能启用淡入淡出动画，否则切换为硬切；fade 类需配合 CSS 中 opacity: 0、transition 和 .fade.show 的 opacity: 1 规则，三者缺一不可。
tab-pane 必须显式加 fade 类，否则切换就是硬切
Bootstrap 5 的 Tabs 动画完全由 CSS 类驱动，fade 不是可选修饰符，而是动画生效的必要钩子。JS 切换时只增删 show 和 active，从不自动加 fade —— 漏掉它，浏览器就当这个面板不需要过渡，直接 display 切换，内容“啪”一下闪现或消失。
常见错误现象：
- 第一个 tab-pane 只有
active，没加fade和show→ 首屏空白 - 动态插入的 tab-pane 元素没手动加
fade→ 切过去瞬间黑屏或白屏 - 用 React/Vue 渲染时只写
className="tab-pane"，漏掉fade→ 动画完全不触发
实操建议：
- 默认激活项：确保 class 含
fade show active - 其他项：至少含
fade（show和active由 JS 控制，无需手写） - 动态插入后立即执行：
newPane.classList.add('fade')，再调用.show()
检查 .tab-pane.fade 是否被正确加载和计算
加了 fade 类但还是硬切？大概率是 CSS 没到位。.tab-pane.fade 规则里必须包含 transition: opacity .15s linear 和初始 opacity: 0，否则类存在也等于不存在。
容易踩的坑：
- 用了精简版 Bootstrap CSS（比如只 import grid 或 utilities），漏掉了 tabs 模块的样式
- 通过 CSS-in-JS（如 Emotion）注入时，
.tab-pane.fade的transition被重置为none - 父容器设了
overflow: hidden或visibility: hidden，把过渡过程裁掉了
验证方式：打开开发者工具，选中一个非激活的 tab-pane 元素，看 computed 样式里是否有 opacity: 0 和 transition 值；没有就说明 CSS 加载失败或被覆盖。
淡入淡出动画需对称，退出帧不能丢
只写 .tab-pane.fade.active { opacity: 1; } 是不够的。当面板从 active 状态被移除时，浏览器会立刻回退到无类状态，如果未激活态没定义可过渡的初始值，退出就变成硬切——你看到的是“进有动画、出没动画”，实际是退出帧丢失。
正确写法（最小必要）：
.tab-pane.fade {
opacity: 0;
transition: opacity .15s linear;
}
.tab-pane.fade.show {
opacity: 1;
}
关键点：
- 基础态（
.fade）必须带opacity: 0和transition，这是退出动画的起点 -
.fade.show是终点，靠层叠优先级覆盖 opacity - 不要用
display: none替代 opacity 控制可见性，它会中断 transition 流程
移动端慎用 transform + opacity 混合过渡
想升级成滑动效果？可以，但得小心。用 transform: translateY() 配合 opacity 在 iOS Safari 和部分安卓 WebView 上容易出现渲染抖动或卡顿，尤其当 tab-pane 内容高度不固定时。
更稳妥的做法：
- 只保留
opacity过渡，兼容性最好 - 若坚持滑动，务必给
.tab-content加overflow: hidden，避免偏移内容溢出 - 别给
.tab-pane设固定height或min-height，否则高度突变会引发布局跳动 - 避免在
.tab-pane上直接写:hover或will-change，它们可能干扰过渡队列
最常被忽略的一点：动画是否生效，不取决于 JS 是否调用成功，而取决于 DOM 上有没有 fade 类、CSS 里有没有对应规则、以及浏览器是否真正计算出了过渡起止帧——三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
