选项卡切换生硬的根源在于仅用opacity过渡而未协同visibility；应统一设置.tab-pane{opacity:0;visibility:hidden;transition:opacity,visibility}，激活时设为opacity:1、visibility:visible，并注意class切换顺序以避免双显。
选项卡切换时内容“啪”一下瞬间替换，体验生硬，主要因为默认没有过渡效果。单纯用 display: none/block 或直接切换 DOM 可视性，浏览器无法对 opacity、height 等属性做平滑过渡。解决核心是：**用 opacity 控制显隐 + transition 配合 visibility 或 pointer-events 保证交互可用性**。
只靠 opacity 过渡还不够
仅设置 opacity: 0 → 1 并加 transition: opacity 0.3s，看起来会渐入，但问题仍在：
- 隐藏态的元素仍占据文档流（若用
opacity: 0但没改visibility），可能遮挡下方内容或影响布局 - opacity 为 0 的元素仍可被聚焦、点击（除非额外禁用）
- 多个 tab-pane 同时存在 DOM 中，未激活的仍参与渲染，略影响性能
推荐做法：opacity + visibility + transition
给每个 tab-pane 设置统一基础样式：
.tab-pane {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tab-pane.active {
opacity: 1;
visibility: visible;
}
关键点：
-
visibility: hidden让元素不可见且不响应事件，也不影响布局（与display: none不同，它保持盒模型） -
transition同时监听两个属性，确保 visibility 在 opacity 完全为 0 后才变 hidden，避免闪现或点击穿透 - 不要用
transition-delay拆开控制，容易不同步；让 visibility 和 opacity 共享相同 timing，浏览器会自动协调
进阶：配合 height 过渡（需已知高度）
如果内容高度固定或可预估（比如卡片高度统一），可加 height 过渡增强动效：
.tab-pane {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease, height 0.25s ease;
}
.tab-pane.active {
opacity: 1;
visibility: visible;
height: auto; /* 注意：auto 无法过渡，需设具体值或用 max-height 替代 */
}
更稳妥方案是用 max-height 代替 height：
- 设一个足够大的
max-height（如max-height: 500px），并确保内容实际高度小于此值 .tab-pane { max-height: 0; overflow: hidden; }.tab-pane.active { max-height: 500px; }- 这样 height 的“视觉伸缩感”就有了，且无需 JS 测高
JS 切换时的小提醒
切换 active 类时，确保旧 pane 先移除 active，新 pane 再添加 —— 否则可能出现两个都 visible 的瞬间。用 classList 替换比 toggle 更可控：
oldPane.classList.remove('active');
newPane.classList.add('active');
如果用框架（如 Vue/React），注意触发 reflow：某些情况下需强制读取 offsetHeight 等属性，确保浏览器拿到上一帧状态再应用新样式（现代浏览器通常自动处理，但复杂嵌套中偶有需要）。
基本上就这些。不复杂，但容易忽略 visibility 和 transition 的协同，导致“以为加了 opacity 就能淡入”，结果还是生硬跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
