开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
在CSS中隐藏元素有多种方法，但它们影响可访问性、布局、动画、性能和事件处理的方式不同。
动画
一些CSS隐藏选项是全部或没有。元素要么是完全可见的，要么是完全不可见的，没有中间状态。其他的，如透明度，可以有一个范围的值，所以插值CSS动画成为可能。
可访问性
下面描述的每个方法都将在视觉上隐藏一个元素，但它可能隐藏也可能不隐藏辅助技术的内容。例如，屏幕阅读器仍然可以显示微小的透明文本。为了描述适当的操作，可能需要进一步的CSS属性或ARIA属性，例如ARIA -hidden="true"。
事件处理
隐藏将停止在该元素上触发事件，或者没有任何效果——也就是说，该元素不可见，但仍然可以单击或接收其他用户交互。
性能
在浏览器加载并解析HTML DOM和CSS对象模型后，页面分三个阶段呈现:
- 布局:生成每个元素的几何形状和位置
- 绘制:绘制出每个元素的像素
- 组合:以适当的顺序放置元素层
只引起构图变化的效果明显比影响布局的效果更流畅。在某些情况下，浏览器还可以使用硬件加速。
1. opacity and filter: opacity()
不透明度:N和过滤器:不透明度(N)属性可以传递一个0到1之间的数字，或者一个0%到100%之间的百分比，分别表示完全透明和完全不透明。
在现代浏览器中，这两者之间的实际差别很小，尽管如果同时应用了多种效果(模糊，对比度，灰度等)，则应该使用过滤器。
不透明可以产生动画效果，并提供出色的性能，但要注意完全透明的元素仍然保留在页面上，并可能触发事件。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 很好，但是IE只支持不透明度0到1 |
| 可访问性 | 如果设置为0或0%，则不读取内容 |
| 布局的影响? | 没有 |
| 渲染需要 | 作文 |
| 性能 | 最好，可以使用硬件加速 |
| 动画帧可能吗? | 是的 |
| 事件触发时隐藏? | 是的 |
2.color Alpha Transparency
不透明度影响整个元素，但也可以分别设置颜色、背景颜色和边框颜色属性。使用rgba(0,0,0,0)或类似的方法应用零alpha通道会使项目完全透明:
每个属性都可以单独动画，以创建有趣的效果。注意，透明度不能应用于具有图像背景的元素，除非它们是使用线性梯度或类似的方法生成的。
alpha通道可以设置为:
透明的:完全透明(中间动画是不可能的)Rgba (r, g, b, a):红色，绿色，蓝色和阿尔法Hsla (h, s, l, a):色相、饱和度、明度和alpha# RRGGBBAA而且# RGBA
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 很好，但是IE只支持透明的而且rgba |
| 可访问性 | 内容仍可阅读 |
| 布局的影响? | 没有 |
| 渲染需要 | 绘画 |
| 性能 | 很好，但不如不透明度 |
| 动画帧可能吗? | 是的 |
| 事件触发时隐藏? | 是的 |
3.transform
transform属性可用于转换(移动)、缩放、旋转或倾斜元素。屏幕外的缩放(0)或平移(-999px, 0px)将隐藏元素:
transform提供了出色的性能和硬件加速，因为元素可以有效地移动到一个单独的层，并且可以在2D或3D中动画。原始布局空间保持原样，但完全隐藏的元素不会触发任何事件。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 好 |
| 可访问性 | 内容仍可阅读 |
| 布局的影响? | 不，原来的维度还在 |
| 渲染需要 | 作文 |
| 性能 | 最好，可以使用硬件加速 |
| 动画帧可能吗? | 是的 |
| 事件触发时隐藏? | 没有 |
4. clip-path
剪切路径属性创建一个剪切区域，该区域决定元素的哪些部分是可见的。使用诸如clip-path: circle(0)这样的值;将完全隐藏元素。
剪辑路径为有趣的动画提供了空间，尽管它只能在现代浏览器中使用。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 仅限现代浏览器 |
| 可访问性 | 某些应用程序仍然可以读取内容 |
| 布局的影响? | 不，原来的维度还在 |
| 渲染需要 | 油漆 |
| 性能 | 合理的 |
| 动画帧可能吗? | 是的，在现代浏览器中 |
| 事件触发时隐藏? | 没有 |
5. visibility
visibility属性可以设置为visible或hidden来显示和隐藏一个元素:
除非使用折叠值，否则元素使用的空格将保持不变。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 优秀的 |
| 可访问性 | 未读内容 |
| 布局的影响? | 不,除非collapse使用 |
| 渲染需要 | 除非collapse使用 |
| 性能 | 好 |
| 动画帧可能吗? | 没有 |
| 事件触发时隐藏? | 没有 |
