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属性。