[toc]

1. 透明度控制：opacity 与 filter: opacity()

这两者都可以使元素透明，但底层逻辑略有不同。

• opacity: 0：元素依然占据空间，且会响应点击事件
• filter: opacity(0)：常用于多重滤镜组合（如模糊、对比度）

注意：如果元素隐藏后不希望被点击（如遮罩层后的按钮），opacity: 0 需要配合 pointer-events: none

2. 空间占位：display: none 与 visibility: hidden

这是最基础的两种方法：

• display: none：彻底移除。元素不占位，不响应事件。由于改变了布局，切换时会触发重排（Reflow），性能开销最大
• visibility: hidden：隐身。元素占位，但不响应事件

3. 位移与缩放：transform

利用硬件加速提升性能：

• scale(0)：元素缩放到 0，依然占位
• translate(-9999px, 0)：将元素移出视野

优势：由于元素处于独立的复合层，其动画处理极其流畅，不会引起周围元素的抖动

4. 几何裁剪：clip-path

通过 clip-path: circle(0) 或 inset(100%) 隐藏

• 场景：适用于需要特定形状展开动画的场景
• 局限：对低版本浏览器兼容性较差

5. 层级遮盖：z-index

将 z-index 设置为负值，使其塌陷到背景层下方

• 前提：元素必须设置了非 static 的定位（如 relative 或 absolute）

6. 物理尺寸收缩

通过 width: 0; height: 0; overflow: hidden; 隐藏

• 优势：可以配合 transition 实现非常丝滑的“手风琴”展开效果
• 劣势：如果包含边框、内边距，需要全部归零

方案	占用空间	响应事件	支持动画	性能
display: none	❌	❌	❌	低（触发重排）
visibility: hidden	✅	❌	✅ (部分)	中（触发重绘）
opacity: 0	✅	✅	✅	高（GPU 加速）
transform: scale(0)	✅	❌	✅	高（硬件加速）
clip-path: circle(0)	✅	❌	✅	中
z-index: -1	✅	❌	✅	中方案v