????最近在玩transition和transform,是時候來對visibility做一個學習總結(jié)锅风。
初接觸
????首先稿静，先談?wù)勎沂窃谑裁吹沫h(huán)境下接觸到和使用到這個visibility的，可能和很多人一樣呢岗，都是初學前端评汰，然后想著如何使元素隱藏读拆。使元素隱藏有挺多方法的汉形，最常見的肯定是display：none,visibility：hidden以及css3的opacity：0纸镊，當然方法都是要看需求的。
visibility屬性值
先看看visibility的屬性值：
visible|hidden|collapse|inherit
visible：默認值概疆，元素可見逗威。
hidden：元素不可見。
collapse：表格中或中使用岔冀，表示該列或列組的所有單元格不顯示凯旭。如果用于非表格元素，collapse與hidden含義相同（這個屬性值我到現(xiàn)在也沒用過楣颠，可能是表格使用的少）
inherit：一個大眾屬性了尽纽，指定一個屬性應(yīng)從父元素繼承它的值咐蚯。（任何HTML元素的任何css屬性都具有的屬性值）
display：none和visibility：hidden的比較
1.文檔流處理方式不同
????????visibility:hidden不脫離文檔流童漩，保留在文檔之中，并且保存原有的物理空間春锋，而display:none則是將對應(yīng)元素從文檔中刪除矫膨，如果需要重新顯示則需要重新繪制頁面。
? ??????未處理前效果圖：(注意圖片邊框與內(nèi)容具有內(nèi)邊距)??
? ??????使用visibility：
? ??????使用display:none（很明顯圖片不在占用物理空間）：
2.對子元素處理方式不同
????????visibility:hidden的子元素可通過設(shè)置visibility:visible在文檔中顯示期奔，而設(shè)置了display:none的子元素是無法通過設(shè)置自身的display屬性重新顯示的侧馅。
3.visibility支持transition
????????設(shè)置visibility的元素，可以通過transition屬性監(jiān)聽屬性值變化呐萌，具有過渡的屬性馁痴，但是display不支持，它是瞬間完成的肺孤。對于visibility的過渡屬性罗晕，如果認真的小伙伴可能回去測試添加了transition的visibility是怎么過渡的，在這里我可以告訴大家結(jié)果：
????????visibility過渡過程的值范圍0~1赠堵，但是這里有個結(jié)論小渊，當visibility的值大于0，它顯示都是一樣的茫叭！一樣的酬屉！一樣的！！Ｄ湃杀饵！
????????所以在使用這個屬性的時候，還是結(jié)合opacity谬擦，可以實現(xiàn)相當不錯的淡入淡出效果凹髓。
結(jié)尾語
????????到這里，本文就正式結(jié)束了怯屉，希望能對大家有所幫助蔚舀。
