2021前端學習筆記-第一章第三節-opacity_visibility_display優劣

display: none;

1. DOM 結構：瀏覽器不會渲染 display 屬性為 none 的元素，不佔據空間；
2. 事件監聽：無法進行 DOM 事件監聽；
3. 效能：動態改變此屬性時會引起重排，效能較差；
4. 繼承：不會被子元素繼承，畢竟子類也不會被渲染；
5. transition：transition 不支援 display。

visibility: hidden;

1. DOM 結構：元素被隱藏，但是會被渲染不會消失，佔據空間；
2. 事件監聽：無法進行 DOM 事件監聽；
3. 性 能：動態改變此屬性時會引起重繪，效能較高；
4. 繼 承：會被子元素繼承，子元素可以通過設定 visibility: visible; 來取消隱藏；
5. transition：visibility 會立即顯示，隱藏時會延時

opacity: 0;

1. DOM 結構：透明度為 100%，元素隱藏，佔據空間；
2. 事件監聽：可以進行 DOM 事件監聽；
3. 性 能：提升為合成層，不會觸發重繪，效能較高；
4. 繼 承：會被子元素繼承,且，子元素並不能通過 opacity: 1 來取消隱藏；
5. transition：opacity 可以延時顯示和隱藏