visibility、display、opacity的区别

visibility、display、opacity理解：

opacity 用来设置透明度
display 定义建立布局时元素生成的显示框类型
visibility 用来设置元素是否可见。

相同点：

        设置visibility:hidden，display:none，opacity:0 ， 都能隐藏dom元素，使元素在页面上看不见

不同点：

display: none;

     1. display: none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
     2.display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

     3.display: none;不会触发该元素已经绑定的事件。
     4.transition无效。

visibility:hidden;

（1）元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
（2）visibility: hidden会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏。
（3）visibility: hidden;不会触发该元素已经绑定的事件。

   (4) transition有效。

opacity:0;

（1）opacity:0;只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式。
（2）opacity:0;会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏。
（3）opacity:0;的元素依然能触发已经绑定的事件。
（4）transition有效。