[原文]http://litianyi.cc/technology/2014/08/27/css-transition/
直接说问题:
1. 通常隐去一个元素用的较多的就是 display:none,当条件触发时,再用 display:block 显示出来。这种方法可以实现“快入快出”,但不会触发 transition 效果,即 transition 属性无效果。
2. 使用 opacity:0 让元素不见,当条件出发时,再使其 opacity: 1。这种方法可以实现 transition 属性淡入淡出的效果,但它本身会存在于页面上的,一个明显的问题就是会挡住用户鼠标对于其下层元素的抓取
3. 第三种是推荐的,使用 visibility: visibility,当条件触发时,用 Javascript 或 JQuery 给它加上新的 CSS 即 “visibility: 1; opacity:1”,这样就很好的实现了transition的淡入淡出效果。注意,之前将 visibility 直接设置 visible 和 hidden 是不会触发 transition 效果的。
示例:
.nav-bar {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-ms-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
visibility: 0;
opacity: 0;
}