Opacity,visibility和display

1.隐藏元素

 
 
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

2.transition

 
 
display:none，完全不受transition属性的影响，元素立即消失
visibility：hidden，元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
opacity和height等属性能够进行正常的动画效果
假设我们要通过CSS3来做一个淡出的动画效果，应该如下：
 
 
1 .fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
2 .fadeOut:hover { visibility: hidden; opacity: 0; }
应该同时设置元素的visibility和opacity属性。