一、display: none
-
DOM结构:浏览器不会渲染 display 属性为 none 的元素,
不占据空间
; -
事件监听:无法进行 DOM 事件监听;
-
性能:动态改变此属性时
会引起重排和重绘
,性能较差; -
继承:
不会被子元素继承
,毕竟子类也不会被渲染; -
transition:transition 不支持 display。
二、visibility: hidden
-
DOM结构:元素被隐藏,但是
会被渲染不会消失
,占据空间
; -
事件监听:无法进行 DOM 事件监听;
-
性能:动态改变此属性时
会引起重绘
,性能较高; -
继承:
会被子元素继承
,子元素可以通过设置 visibility: visible来取消隐藏; -
transition:visibility 会立即显示,隐藏时会延时。
三、opactiy: 0
-
DOM结构:透明度为 100%,元素隐藏,
占据空间
; -
事件监听:可以进行 DOM 事件监听;
-
性能:提升为合成层,
不会触发重绘
,性能较高; -
继承:
会被子元素继承
,且子元素并不能通过 opacity: 1 来取消隐藏; -
transition:opacity 可以延时显示和隐藏。