【常见方法对比】
方法 | 是否占据空间 | 是否可交互 | 是否触发重绘/回流 | 典型场景 |
---|---|---|---|---|
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
。”