隐藏元素

不同隐藏方式的差别，不只在“占不占空间”，还包括是否可交互、是否参与可访问性树、是否触发布局变化。

常见方式

• display: none：元素不渲染，不占据空间。
• visibility: hidden：元素不可见，但仍占据空间。
• opacity: 0：元素完全透明，仍占据空间，默认仍可交互。
• transform: scale(0)：通过缩放实现视觉隐藏，仍占据原有布局空间。

对比

方式	占据空间	可点击/可聚焦	常见特点
display: none	否	否	通常最彻底，布局会变化
visibility: hidden	是	否	位置保留，但内容不可见
opacity: 0	是	是	常用于渐隐动画，但要额外交互控制
transform: scale(0)	是	取决于实现	更偏动画技巧，不适合通用隐藏

怎么选

• 需要彻底移除展示和交互时，优先用 display: none。
• 需要保留原位置但暂时不可见时，可用 visibility: hidden。
• 需要做淡入淡出动画时，可用 opacity，但通常要结合 pointer-events: none。

注意事项

• 仅把元素设为透明，并不等于它不可点击。
• 如果隐藏的是可交互元素，还要考虑键盘焦点和屏幕阅读器行为。
• 为了动画把元素长期保留在“透明但可交互”状态，容易造成隐藏交互层问题。