Bootstrap 5 tab 切换需用 opacity+visibility 替代 display 控制显隐，关键 CSS 为：.tab-content > .tab-pane {opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}.tab-content > .tab-pane.show {opacity:1;visibility:visible;}
Bootstrap 5 默认不支持 tab 切换的 opacity 过渡
Bootstrap 5 的 tab-pane 切换默认靠 display: none 控制显隐，而 opacity 是不可过渡的——因为从 display: none 到 display: block 会中断 CSS 动画链。直接加 transition: opacity .3s 没用，面板会“闪现”，不是淡入。
必须让所有 tab-pane 始终在文档流中（即不用 display 切换），改用 opacity + visibility 配合控制。
- 移除 Bootstrap 默认对
.tab-pane的display切换逻辑（需覆盖 JS 行为或用 CSS 强制） -
opacity: 0时必须配visibility: hidden，否则仍占交互区域 -
opacity: 1时设visibility: visible，且确保height或overflow不导致布局跳动
覆盖默认样式并启用 opacity 过渡的关键 CSS 规则
只写这几行就能生效，但顺序和选择器权重很重要：
.tab-content > .tab-pane {
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.tab-content > .tab-pane.show {
opacity: 1;
visibility: visible;
}
注意：.show 是 Bootstrap 切换时自动加在当前面板上的 class；> 子选择器防止样式污染嵌套 pane；visibility 必须和 opacity 同步过渡，否则会出现半透明可点击的“幽灵面板”。
- 不要用
animation替代transition，它无法响应 JS 动态增删.show - 如果用了
fade类（如），得先禁用它的opacity: 0和transition，否则和你的规则冲突- 移动端 Safari 对
visibility+transition支持稳定，但旧版 Android WebView 可能有渲染延迟JavaScript 层需确保 .show 类切换时机准确
Bootstrap 的
shown.bs.tab事件触发时，.show已被加上，但 DOM 重排可能未完成——如果你在事件回调里立刻操作tab-pane的子元素高度，可能拿不到正确值。- 过渡依赖 CSS 类切换，不依赖 JS 手动设
style.opacity，否则绕过 Bootstrap 状态管理 - 避免在
show.bs.tab（显示前）里修改opacity，此时面板还是隐藏态，强行设opacity: 1会破坏过渡起点 - 若用自定义 tab 激活逻辑（比如
tab.show()），确认它确实触发了.show类增删，而不是仅操作style.display
IE11 或低版本 Edge 下 opacity 过渡失效怎么办
这些浏览器不支持
visibility的 transition，且对opacity过渡有渲染 bug：可能首帧卡在 0.99 而非平滑到 1，或过渡结束后残留模糊边框。- 加
transform: translateZ(0)强制硬件加速，缓解模糊 - 放弃
visibility，改用pointer-events: none配合opacity，但需额外处理键盘焦点（tabindex="-1"） - 更稳妥的做法是检测
prefers-reduced-motion或 UA，对老浏览器降级回无动画切换，而不是硬撑过渡
真正难的不是写这三行 CSS，而是意识到：过渡效果必须和框架的状态更新节奏对齐，而不是和 DOM 显隐逻辑打架。稍一错位，就是半秒白屏或者点不动的 tab。
- 移动端 Safari 对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
