display、visibility、opacity三者的联系与区别

问题引入：当我们使用transition给某个元素添加过渡效果时，如果是display: none 到 display: block 的变化，那么transition属性是不生效的。
解决：这时我们需要使用visibility和opacity来替代display！

1. 首先认识这三个属性：

①. display 定义建立布局时元素生成的显示框类型

取值：none 、block、…

②. visibility 用来设置元素是否可见

取值：hidden、visible

③. opacity 用来设置透明度

取值：0~1 （0是透明，1是不透明）

2. 三者的区别：

display、visibility、opacity这三个属性分别取值 none、hidden、0都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。

	display: none	visibility: hidden	opacity: 0
是否占据页面空间	不占据	占据	占据
子元素设置该属性，其他值是否可以继续显示	不可以	可以	不可以
自身绑定的事件是否能继续触发	不能触发	不能触发	能触发
是否影响遮挡住的元素触发事件	不影响	不影响	影响
属性值改变是否产生回流	产生	不产生	不产生
属性值改变是否产生重绘	产生	产生	不一定产生
该属性是否支持transition	不支持	支持	支持

3. 结合transition使用举例：

/*按照如下设置即可实现过渡效果*/
.nav-inner{
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
}
.nav-out>li:hover>.nav-inner{
    visibility: visible;
    opacity: 1;
}