【常见方法对比】
| 方法 | 是否占据空间 | 是否可交互 | 是否触发重绘/回流 | 典型场景 |
|---|---|---|---|---|
display:none |
❌ 不占空间 | ❌ 不可交互 | 回流+重绘 | 完全移除元素（菜单切换、Tab 切换） |
visibility:hidden |
✅ 占空间 | ❌ 不可交互 | 重绘 | 保留布局避免抖动 |
opacity:0 |
✅ 占空间 | ✅ 可交互(可用 pointer-events:none 禁止) |
重绘 | 需要动画渐变或保留点击区域 |
position:absolute + 远移 |
❌/✅(取决于定位) | ❌ | 回流 | 需要保留 DOM 但彻底移出可视区 |
clip-path / transform:scale(0) |
✅ 占空间 | ❌(可配合 pointer-events) | 重绘/GPU | 动画、过渡 |
z-index:-1 |
✅ 占空间 | ❌(被其他元素覆盖) | 重绘 | 简单遮挡，不推荐作为隐藏 |
aria-hidden="true" |
✅ | ✅ | 无 | 仅无障碍隐藏（屏幕阅读器不可见） |
⚠️ 使用注意
1、动画需求：如果需要渐隐渐现，用 opacity + transition，因为display 无法过渡
2、布局影响：display: none 会导致周围元素重新计算布局( 回流 )，如果需要频繁切换 性能开销较大
3、可访问性：仅视觉隐藏但是 可以被屏幕阅读器访问，考虑使用 aria-hidden=true
4、交互控制：opacity: 0 可以点击，可以通过 pointer-events: none 禁止
🎯 面试小技巧
“选择隐藏方式要看需求：
完全移除用 display:none，
保留位置用 visibility:hidden，
需要渐变动画用 opacity:0 配合 pointer-events:none。”
