实现元素淡入淡出遇到的问题

[原文]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;
}