❓ 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。

display: none;

1. DOM：浏览器不会渲染 display 属性为 none 的元素，不占据空间；

2. 事件监听：事件监听无效

3. 性能：属性更改会引起页面的重排（不了解的可以点这里）频繁的更改，势必会带来大量的性能损耗

4. 继承性：不会被子元素继承（子类也不会被渲染）

visibility: hidden;

1. DOM：元素被隐藏，但是会被渲染不会消失，占据空间

2. 事件监听：事件监听无效

3. 性能：属性更改会引起页面重绘，性能消耗相对较低

4. 继承性：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；

opacity: 0;

1. DOM：元素透明度 100%，元素隐藏，占据空间

2. 事件监听：可以进行 DOM 事件监听

3. 性能：提升为合成层，不会触发重绘，性能较高（触发 css 硬件加速的）

4. 继承性：会被子元素继承，子元素不能通过 opacity: 1; 来取消隐藏；