浅谈visibility

    最近在玩transition和transform,是时候来对visibility做一个学习总结。

初接触

    首先，先谈谈我是在什么的环境下接触到和使用到这个visibility的，可能和很多人一样，都是初学前端，然后想着如何使元素隐藏。使元素隐藏有挺多方法的，最常见的肯定是display：none,visibility：hidden以及css3的opacity：0，当然方法都是要看需求的。

visibility属性值

先看看visibility的属性值：

visible|hidden|collapse|inherit

visible：默认值，元素可见。

hidden：元素不可见。

collapse：表格中或中使用，表示该列或列组的所有单元格不显示。如果用于非表格元素，collapse与hidden含义相同（这个属性值我到现在也没用过，可能是表格使用的少）

inherit：一个大众属性了，指定一个属性应从父元素继承它的值。（任何HTML元素的任何css属性都具有的属性值）

---

display：none和visibility：hidden的比较

1.文档流处理方式不同

        visibility:hidden不脱离文档流，保留在文档之中，并且保存原有的物理空间，而display:none则是将对应元素从文档中删除，如果需要重新显示则需要重新绘制页面。

        未处理前效果图：(注意图片边框与内容具有内边距)  

未处理前效果图：(注意图片边框与内容具有内边距)

        使用visibility：

使用visibility:

        使用display:none（很明显图片不在占用物理空间）：

使用display:none:（很明显图片不在占用物理空间）

2.对子元素处理方式不同

        visibility:hidden的子元素可通过设置visibility:visible在文档中显示，而设置了display:none的子元素是无法通过设置自身的display属性重新显示的。

3.visibility支持transition

        设置visibility的元素，可以通过transition属性监听属性值变化，具有过渡的属性，但是display不支持，它是瞬间完成的。对于visibility的过渡属性，如果认真的小伙伴可能回去测试添加了transition的visibility是怎么过渡的，在这里我可以告诉大家结果：

        visibility过渡过程的值范围0~1，但是这里有个结论，当visibility的值大于0，它显示都是一样的！一样的！一样的！！！！

        所以在使用这个属性的时候，还是结合opacity，可以实现相当不错的淡入淡出效果。

---

结尾语

        到这里，本文就正式结束了，希望能对大家有所帮助。