display/height/top 不能加 transition，因为它们触发重排且无法插值；只有 opacity 和 transform 支持平滑过渡，配合 visibility 实现无障碍动画，并需用 will-change 或 translateZ(0) 启用 GPU 加速。
直接用 display: none 切换标签页，不可能有过渡效果；想加动画，必须避开重排属性，只对 opacity 和 transform 做 transition。
为什么 display/height/top 不能加 transition
浏览器对 display、height、top、left 等属性的变更会触发重排（reflow），而重排无法被硬件加速，动画必然卡顿或跳变。更关键的是：display 本身不支持过渡 —— 它只有两个离散状态（none / block），没有中间值可插值。
常见错误现象：
- 给 height 加 transition，但内容高度不确定，动画收不全或突变成 0
- 用 max-height 模拟展开，却设了 max-height: 0 → 10px，实际内容高 200px，结果动画飞快收掉一半就停
- 切换瞬间闪一下白屏或布局抖动，本质是重排打断了渲染帧
实操建议：
- 只在 CSS 中对 opacity 和 transform 写 transition
- 动画时间控制在 0.25s–0.35s，太短用户感知不到，太长拖慢操作节奏
- 确保父容器有 overflow: hidden（尤其用 transform: translateX() 时）
opacity + visibility 组合才是淡入淡出的安全写法
只靠 opacity: 0 → 1 不够：不可见时元素仍占位、可被键盘聚焦、读屏器照常朗读，无障碍直接失效。
正确做法是把 opacity 和 visibility 绑定在同一套 class 规则里：
立即学习“前端免费学习笔记（深入）”；
.tab-panel {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.tab-panel.active {
opacity: 1;
visibility: visible;
}注意点：
- transition 必须写在非激活态（.tab-panel）上，否则首次显示无动画
- 不要用 display: none 替代 visibility: hidden，前者不支持 transition，后者能参与动画且语义清晰
- 若内容含表单或 iframe，visibility: hidden 不会暂停它们，需额外处理（比如切换时手动 pause() 或卸载）
用 transform 实现滑动切换要提前提示 GPU 加速
transform: translateX() 是唯一能稳定触发硬件加速的位移方式，比 left 或 margin-left 流畅得多，尤其在移动端。
但默认情况下，浏览器不会为它预分配 GPU 资源。必须显式声明优化意图：
实操建议：
- 在面板容器上加 will-change: transform（仅在动画期间需要，切完可移除）
- 或更稳妥地加 transform: translateZ(0) 强制启用 GPU 层
- 非激活面板设为 transform: translateX(-100%)，激活面板为 translateX(0)
- 所有面板统一设 position: absolute，避免相互挤占导致滑动错位
JS 控制 class 切换时防重复触发的关键细节
用户快速连点标签，容易导致上一帧动画未结束，下一帧状态已变更，出现两个面板同时显示、或都隐藏的 UI 错乱。
根本原因不是 JS 逻辑错，而是没同步 DOM 状态与视觉状态。解决方案不是节流，而是状态锁：
实操建议：
- 切换前检查 getComputedStyle(panel).opacity === '0'，为 '0' 才执行下一次
- 或监听 transitionend 事件，在回调里清除锁、允许下次操作
- 用 el.classList.toggle('active', true) 替代 add/remove 分步调用，避免中间态残留
- 每次切换前，先统一移除所有 .tab-panel.active，再给目标加 —— 否则旧状态可能滞留
最容易被忽略的一点：动画属性必须写在非激活态规则里，且不能被其他样式覆盖（比如某个组件库的全局 transition: all 会干扰局部控制）。写死 transition: opacity 0.3s, transform 0.3s 比依赖 all 更可靠。
