标签页切换“闪一下”是因为display不可过渡；应改用opacity+visibility组合实现平滑过渡，配合pointer-events:none避免误触，复杂动画需JS控制状态同步。
标签页（Tab）本身不依赖任何切换效果，display: none 或 visibility: hidden 就能完成基础显隐控制；所谓“切换效果”是额外叠加的 CSS 动画或 JS 过渡逻辑，不是标签页功能必需项。
为什么直接用 display: none 切换会“闪一下”
因为 display 是不可过渡的 CSS 属性，浏览器无法在两个状态间插值。哪怕你写了 transition: all 0.3s，对 display 也完全无效。
- 常见表现：点击 Tab 后内容突然出现/消失，无渐变、缩放、滑动等过程
- 根本原因：
display的取值是离散的（block/none），不是连续数值 - 替代方案：改用
opacity+transform控制显隐，再配合transition
visibility + opacity 组合比单纯 display 更可控
这个组合保留 DOM 占位、支持过渡、避免重排，适合大多数轻量切换场景。
-
visibility: hidden让元素不可见但保留空间，且可被transition触发 -
opacity: 0配合transition: opacity 0.2s ease实现淡入淡出 - 注意要加
pointer-events: none到隐藏态，否则透明但可点的内容会拦截点击 - 示例关键 CSS：
.tab-panel.active {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease, visibility 0.2s;
}
.tab-panel:not(.active) {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
需要滑动/缩放等复杂动画时，得靠 JS 控制 class 状态
CSS 只能描述“如何动”，JS 才能决定“什么时候动”——尤其是当上一个面板还没退场完、下一个就急着入场时，容易出现层叠错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
classList.add()+classList.remove()配合getComputedStyle().opacity或transitionend事件做状态同步 - 避免同时操作多个面板的
opacity和transform，优先给当前激活面板加z-index提升层级 - 移动端要注意
transform: translateZ(0)或will-change: transform触发硬件加速，否则滑动卡顿 - 不要在
transitionend里直接切下一组 class，先setTimeout(fn, 0)微任务延后，防止样式未生效就执行
真正难的不是让内容动起来，而是动的过程中保持交互响应、不阻塞滚动、不误触其他 Tab —— 这些细节往往在快速写完 demo 后才暴露出来。
