最近在玩transition和transform,是時候來對visibility做一個學習總結。

初接觸

首先，先談談我是在什麼的環境下接觸到和使用到這個visibility的，可能和很多人一樣，都是初學前端，然後想著如何使元素隱藏。使元素隱藏有挺多方法的，最常見的肯定是display：none,visibility：hidden以及css3的opacity：0，當然方法都是要看需求的。

visibility屬性值

先看看visibility的屬性值：

visible：預設值，元素可見。
hidden：元素不可見。
collapse：表格中或中使用，表示該列或列組的所有單元格不顯示。如果用於非表格元素，collapse與hidden含義相同（這個屬性值我到現在也沒用過，可能是表格使用的少）
inherit：一個大眾屬性了，指定一個屬性應從父元素繼承它的值。（任何HTML元素的任何css屬性都具有的屬性值）

visibility:hidden不脫離文件流，保留在文件之中，並且儲存原有的物理空間，而display:none則是將對應元素從文件中刪除，如果需要重新顯示則需要重新繪製頁面。

未處理前效果圖：(注意圖片邊框與內容具有內邊距)

使用visibility：

使用display:none（很明顯圖片不在佔用物理空間）：

visibility:hidden的子元素可通過設定visibility:visible在文件中顯示，而設定了display:none的子元素是無法通過設定自身的display屬性重新顯示的。

設定visibility的元素，可以通過transition屬性監聽屬性值變化，具有過渡的屬性，但是display不支援，它是瞬間完成的。對於visibility的過渡屬性，如果認真的小夥伴可能回去測試新增了transition的visibility是怎麼過渡的，在這裡我可以告訴大家結果：

visibility過渡過程的值範圍0~1，但是這裡有個結論，當visibility的值大於0，它顯示都是一樣的！一樣的！一樣的！！！！

所以在使用這個屬性的時候，還是結合opacity，可以實現相當不錯的淡入淡出效果。

到這裡，本文就正式結束了，希望能對大家有所幫助。