display: none; DOM 結構:瀏覽器不會渲染 display 屬性為 none 的元素,不占據空間; 事件監聽:無法進行 DOM 事件監聽; 性能:動態改變此屬性時會引起重排,性能較差; 繼承:不會被子元素繼承,畢竟子類也不會被渲染; transition:transition 不支持 ...
-
DOM 結構:瀏覽器不會渲染 display 屬性為 none 的元素,不占據空間;
-
事件監聽:無法進行 DOM 事件監聽;
-
性能:動態改變此屬性時會引起重排,性能較差;
-
繼承:不會被子元素繼承,畢竟子類也不會被渲染;
-
transition:transition 不支持 display。
visibility: hidden;
-
DOM 結構:元素被隱藏,但是會被渲染不會消失,占據空間;
-
事件監聽:無法進行 DOM 事件監聽;
-
性 能:動態改變此屬性時會引起重繪,性能較高;
-
繼 承:會被子元素繼承,子元素可以通過設置 visibility: visible; 來取消隱藏;
-
transition:visibility 會立即顯示,隱藏時會延時
opacity: 0;
-
DOM 結構:透明度為 100%,元素隱藏,占據空間;
-
事件監聽:可以進行 DOM 事件監聽;
-
性 能:提升為合成層,不會觸發重繪,性能較高;
-
繼 承:會被子元素繼承,且,子元素並不能通過 opacity: 1 來取消隱藏;
-
對了,小編為大家準備了一套2020最新的web前端資料,需要點擊下方鏈接獲取方式