最近在玩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：
使用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，可以实现相当不错的淡入淡出效果。
结尾语
到这里，本文就正式结束了，希望能对大家有所帮助。
