tab内容区跳动源于css状态未对齐：.tab-pane缺fade类、父容器未设overflow:hidden裁剪、或transform退出动画未在基础选择器中定义，导致视觉抽搐与硬切。
Tab内容区跳动不是JS切换慢，而是CSS状态没对齐——.tab-pane缺fade类、父容器没裁剪溢出、或transform偏移没配对退出动画，都会导致视觉抽搐。
为什么.tab-pane加了fade还是跳？检查show类是否只在默认项上
Bootstrap 5 完全靠类组合驱动动画：.tab-pane.fade定义过渡行为，.show控制显隐，但二者必须按规则共存。漏掉任何一个，就会硬切。
- 默认激活的
.tab-pane必须同时有fade、show、active - 其他
.tab-pane只需fade（JS 会自动增删show和active） - 动态插入新面板时，必须在调用
.show()前手动加fade类，否则 JS 不认它要过渡 - 如果用了自定义动画（比如滑入），别删
.tab-pane.fade的基础声明，否则连淡入都失效
内容区高度塌陷或错位？.tab-content overflow:hidden 是关键
用 transform: translateY() 做滑动时，隐藏面板仍占文档流位置。不裁剪，就会看到偏移内容“露出来”，或者切换时因高度计算不准而跳。
- 给
.tab-content加overflow: hidden，这是强制裁剪的最简解法 - 不要给
.tab-pane设固定height或min-height，除非业务强要求；它应由内容自然撑开 - 若内容高度差异大，可加
visibility: hidden到非激活态（配合opacity: 0），但绝不能用display: none——会中断 transition - Bootstrap 5.3+ 默认已给
.tab-pane加了opacity: 0和transition，但没配transform，得自己补全
动画只进不出？.tab-pane.active 的退出过渡常被忽略
只写 .tab-pane.active { opacity: 1; transform: translateY(0); } 是不够的。当类被移除，浏览器瞬间回退到未声明状态，过渡属性丢失，退出变成硬切。
- 必须为非
.active状态明确定义退出终态：.tab-pane:not(.active) { opacity: 0; transform: translateY(10px); } - 所有过渡属性（
opacity和transform）都要写在基础.tab-pane上，而不是只写在.active里 - 别用
transition: all 0.3s—— 这会让 DOM 加载时所有面板都触发初始过渡，造成抖动 - 推荐写法：
.tab-pane { transition: opacity 0.3s ease, transform 0.3s ease; }
最容易被忽略的是：动态插入后忘记加 fade 类，以及退出动画没写在基础选择器里。这两处一错，滑动就退化成闪现——不是效果没加，是 CSS 根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
