display:none无法平滑过渡，因其是离散属性无中间状态，必须改用opacity+visibility+pointer-events组合实现淡入淡出，并配合will-change或transform启用GPU加速。
直接用 display: none 切换标签页，一定会闪——这不是你代码写得不够快，而是浏览器根本没法对 display 做过渡。
为什么 display 切换必然闪烁
display 是离散属性，没有中间状态。哪怕你写了 transition: all 0.3s，浏览器也完全忽略。它不是数值型属性，CSS 动画引擎无法插值，只能硬切。更糟的是，display: none 会触发重排（reflow），DOM 占位消失、布局重算、子元素（如 iframe、video、表单输入框）全部中断或重置。
- 常见表现：点击后内容“啪”一下弹出来，没淡入、没位移、没缓动
- 副作用：滚动位置丢失、焦点消失、音频暂停、React/Vue 组件重新挂载
- 尤其在后台系统里，一个带表格+图表+搜索框的标签页被
v-if销毁再重建，用户刚输一半的关键词就没了
opacity + visibility 是最小改动方案
不用改结构、不加框架、不引入 JS 动画库，只改 CSS 就能消除闪烁。关键是让元素“不可见但仍在流中”，且支持硬件加速过渡。
- 隐藏态：
opacity: 0; visibility: hidden; pointer-events: none; - 显示态：
opacity: 1; visibility: visible; pointer-events: auto; - 过渡声明必须只写
transition: opacity 0.25s ease, visibility 0.25s;—— 不要写all，visibility本身不可动画，但配合opacity可实现“视觉上同步隐显” - 给容器加
will-change: opacity;或transform: translateZ(0);，启用 GPU 加速（尤其 Chrome 和 Edge 下效果明显） - 务必加
pointer-events: none，否则opacity: 0的面板仍会拦截点击，导致按钮点不中
框架里别用 v-if / {show && } 摧毁组件
Vue 的 v-if、React 的条件渲染 JSX，在后台多标签页场景下是性能陷阱。每次切换都等于卸载+重挂载，状态清空、定时器中断、图表重绘、请求重发。
立即学习“前端免费学习笔记（深入）”；
- Vue：改用
v-show，它只切display: none，但组件实例保留在内存里 - React：用
style={{ display: active ? 'block' : 'none' }}或 CSS 类（如class={active ? 'tab-pane active' : 'tab-pane'}） - 如果真要销毁（比如释放大图或 iframe 资源），应在组件
useEffect清理函数或beforeUnmount钩子里手动处理，而不是依赖切换时机 - 状态必须按 tab key 隔离：React 用
useState(() => initByTab(tabKey))，Vue 用computed或单独ref，避免多个标签页共用同一份formData
键盘导航和 ARIA 状态不同步才是真坑
很多后台系统做了平滑动画，却忘了焦点跳转和屏幕阅读器语义——用户按 Tab 键进不去新标签页，或者读到“首页已选中”，实际显示的是“日志页”。这比闪烁更致命。
- 所有页签按钮加
role="tab"、tabindex="0"；当前激活项设tabindex="-1"并加aria-selected="true" - 对应面板加
role="tabpanel"、aria-labelledby指向页签 ID、aria-hidden="false"（非活跃页设aria-hidden="true"） - 切换完成后，立即调用
targetPanel.querySelector('[tabindex="0"], input, button')并.focus() - 监听
ArrowLeft/ArrowRight，用event.preventDefault()阻止页面滚动，再手动移动激活态
最易被忽略的不是动画怎么写，而是 aria-hidden、tabindex、JS 显隐逻辑三者是否严格同步——差一帧，可访问性就断了。
