标签页切换闪烁的根源是DOM反复销毁重建，应避免v-if/display:none，改用opacity+visibility过渡、v-show/hidden属性保留实例，并完善焦点管理与可访问性。

标签页切换时内容闪烁，根本不是“动画没加好”，而是 DOM 被反复销毁重建导致的视觉断层。只要用了 v-if、{show && } 或直接操作 style.display = 'none'，就大概率踩中这个坑。

为什么 display: none + transition 会失效

CSS 的 transition 对 display 属性完全不生效——这是规范行为，不是浏览器 Bug。你写 transition: all 0.3s，但 display 切换是离散的（block ⇄ none），没有中间状态，所以浏览器只能硬切，造成闪动。

• 别用 display 控制显隐来实现过渡效果
• 改用 opacity + visibility 组合：隐藏时设 opacity: 0; visibility: hidden;，显示时设 opacity: 1; visibility: visible;
• 必须同时给 transition 写两个属性：transition: opacity 0.25s, visibility 0.25s（注意 visibility 的过渡时间不能为 0，否则仍会突显）
• 对频繁切换的面板加 will-change: opacity，尤其在 iOS Safari 上能明显减少卡顿

Vue/React 中 v-if 和条件渲染的陷阱

框架里写 v-if="activeTab === 'user'" 或 {tab === 'user' && }，本质仍是卸载/挂载组件。含图表、富文本、iframe 的面板切一次就重初始化一次，DOM 重建 + JS 重执行 = 闪 + 慢。

• 优先改用 v-show（Vue）或 style={{ display: activeTab === 'user' ? 'block' : 'none' }}（React），保留组件实例和内部状态
• 如果必须用 v-if，务必加唯一 :key，比如 :key="tabId"，防止 Vue 复用错误节点导致状态错乱
• 检查是否在切换瞬间触发了全局样式重置（如重设 body 字体大小、加载新 CSS 文件），这类操作会强制重排重绘，放大闪烁感

用 hidden 属性替代 display 是最稳妥的起点

hidden 是 HTML5 原生属性，比 display: none 更语义化、更安全：它不仅隐藏元素，还会暂停内部 、、，并自动处理焦点与可访问性状态（aria-hidden、tabindex 等无需手动维护）。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 所有非活跃面板统一加 hidden 属性：
• 切换逻辑只需两步：document.querySelectorAll('[hidden]').forEach(el => el.hidden = true)，再 targetPanel.hidden = false
• 首次加载时，必须手动移除默认激活面板的 hidden，否则白屏；不要依赖 CSS 隐藏兜底
• 配合 data-tab 映射按钮与面板（如按钮 data-tab="user" → 面板 id="panel-user"），不依赖 DOM 顺序或 class 名，避免复用冲突

键盘导航和焦点管理常被忽略

纯 CSS 切换或 JS 手动 show/hide 后，Tab 键可能直接跳过整个标签页区域，或者焦点“掉出”到页面其他地方——这不是视觉闪烁，但会让键盘用户感知为内容“消失”了。

• 每个标签按钮设 tabindex="0"，非活跃面板设 tabindex="-1" + aria-hidden="true"，活跃面板设 aria-hidden="false"
• 切换完成后，立刻调用 panelElement.focus()，聚焦到面板内第一个可聚焦子元素（如 或带 tabindex="0" 的
  ）
• 监听 keydown 支持左右方向键切换标签，并在处理时调用 event.preventDefault()，防止页面意外滚动

真正难的不是让内容“动起来”，而是让 DOM 不动、状态不丢、焦点不散、屏幕不闪——这些细节堆叠起来，才是用户感受到的“丝滑”。