用 opacity + visibility + transition 组合才能真正实现视觉上的“无缝”切换，仅靠 display: none 切换永远是突兀的、不可动画的，因其为离散属性无法插值；需配合 visibility 控制可访问性，opacity 控制透明度，并同步更新 aria-hidden 与 tabindex 保障无障碍。
用 opacity + visibility + transition 组合才能真正实现视觉上的“无缝”切换，仅靠 display: none 切换永远是突兀的、不可动画的。
为什么 display: none 不支持过渡动画
display 是一个离散属性（discrete property），浏览器无法在 none 和 block 之间插值，所以写 transition: display 0.3s 完全无效。常见错误是加了 transition 却没效果，最后归咎于“CSS 写错了”，其实是根本不能这么用。
- 必须用
opacity控制透明度变化，配合visibility控制可访问性与交互状态 -
visibility: hidden保留布局占位，opacity: 0让内容不可见但可被聚焦——两者必须同时设置，否则屏幕阅读器可能读取不可见内容，或键盘 Tab 仍能进入已“隐藏”的表单 - CSS 中要显式声明
transition: opacity 0.25s ease, visibility 0.25s，不能只写all，否则 visibility 的切换会带延迟感
如何用 class 切换实现淡入淡出
JS 只负责增删 active 类，所有样式和动画逻辑交给 CSS，这样既解耦又利于复用。
- 初始状态：所有面板设
.tab-pane { opacity: 0; visibility: hidden; } - 激活状态：目标面板加
.tab-pane.active { opacity: 1; visibility: visible; } - 为防动画重叠，切换前先移除全部
active类：document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'))，再给目标加 - 若需硬件加速滑动效果，改用
transform: translateX()替代opacity，但必须加will-change: transform，否则低端安卓机易掉帧
data-tab 映射比 id 更安全的场景
当页面中存在多个标签页组件（比如侧边栏一个、主区一个），用 id 会导致冲突，因为 ID 必须全局唯一；而 data-tab 是局部作用域，更适配复用。
- 按钮写
<button data-tab="settings">设置</button>，面板写<div data-tab-panel="settings">...</div> - JS 中用
document.querySelector(`[data-tab-panel="${tab}"]`)查找，不依赖 DOM 位置或 ID 命名规则 - 注意空值防护：获取
tab = btn.dataset.tab后，先判断if (!tab) return，避免querySelector返回null导致后续报错Cannot read property 'classList' of null
hidden 属性比 display 更语义化但有兼容细节
hidden 是 HTML5 原生布尔属性，语义明确且支持 CSS 选择器 [hidden]，但它默认等价于 display: none，一样不支持 transition —— 所以想加动画，还得覆盖样式。
- 必须额外定义：
[hidden] { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } - 首次加载时，要手动移除默认激活面板的
hidden属性，否则白屏；不能只靠 JS 初始化，因为 HTML 解析早于 JS 执行 - 含
<video></video>或<iframe></iframe>的面板慎用hidden：Safari 下hidden不暂停视频缓冲，display: none也不一定停，真正可靠的是监听tab切换后手动pause()或src = ''
最易被忽略的一点：无论用哪种方式，都得同步更新 aria-hidden 和 tabindex。用户用键盘切 tab 时，非激活面板若仍可聚焦或被读屏器读取，就不是“无缝”，而是“无障碍断裂”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
