opacity: 0、visibility: hidden、display: none 优劣和适用场景

• 素display:none

1. DOM 结构：元素完全从渲染树中消失，不占据空间；
2. 子节点：不会被子节点继承，子节点设置display:block也无法显示；
3. 性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能；
4. Event事件：无法进行 DOM 事件监听、无法被选中；
5. transition：transition无效，会立即显示或隐藏。

• visibility:hidden

1. DOM 结构：元素存在于渲染树中，占据空间，内容不可见；
2. 子节点：会被子节点继承，子节点设置visibility:visible可以显示；
3. 性 能：动态改变此属性时会引起回流，性能一般；
4. Event事件：无法进行 DOM 事件监听、无法被选中；
5. transition：设置为visible时会立即可见，设置为hidden时会延时隐藏。

• opacity: 0

1. DOM 结构：元素存在于渲染树中，占据空间，内容不可见；
2. 子节点：不会被子节点继承，子节点设置opacity:1也无法显示；
3. 性 能：触发css3硬件加速，性能较高；
4. Event事件：可以进行 DOM 事件监听、无法被选中但响应鼠标手势等(如title属性)；
5. transition：完整支持transition动画。