display:none; & visibility:hidden; & opacity:0;

首先来说说 display:none

直译：不展示。就是彻底的消失。

• render tree中也不存在（dom tree中存在）；
• 可能会引起 reflow 。
• 在它身上绑定的事件也无法触发。
• 过渡动画都失效了。

比如我曾经看到一个效果就是

hover.gif

我开始想的是鼠标移入display:block，鼠标移出 display:none;
然后加一个 transition;
可谁知，完全不触发 transition 。。
后来，我就用了 高度 从0 到300px 去代替这个 display。

总之，display:none 不占用空间。不能被继承。绑定的事件无法触发。过渡动画无效

再来看看visibility:hidden

visibility: hidden

• 渲染为空盒子;
• 在render tree中存在；
• 不会引起reflow；性能更好；
• 也不会触发事件
• 设置的 transition 是有效的。

#wrapper { 
      width: 300px;
      height: 300px; 
      background-color: skyblue; 
      transition: all 5s; 
}
#wrapper:target { 
      visibility: hidden; 
} 
<a href="#wrapper">click</a> 
<div id="wrapper"></div>

下面的效果相当于有一个空盒子在占位；如果是display，第二个粉色盒子就直接顶上去了。。

div { 
  width: 100px; 
  height: 100px; 
  margin: 10px; 
} 
.one { 
    background-color: skyblue;
    visibility: hidden; /* display: none; */ 
} 
.two { 
    background-color: pink; 
} 
.three { 
    background-color: tomato; 
} 
<div class="one"></div> 
<div class="two"></div>
<div class="three"></div>

display.gif

opacity:0

直译：透明
只是你肉眼看不到，但是他还是完全存在的，就像哈利波特披上了隐形斗篷！
身上的所有绑定事件都还是有的。

#wrapper { 
   width: 300px; 
   height: 300px; 
   background-color: tomato; 
   cursor: pointer; opacity: 0; 
}

 document.querySelector('#wrapper') 
   .addEventListener('click', function () { 
     console.log('我隐身了！');
 }

还有一个隐藏就是rgba中的a(alpha),他和opacity有什么区别？

opacity:0; 是整个DOM元素以及里面的内容透明(包括文字等),也就是子元素们是会继承的。
而 rgba 中只是让颜色或背景透明，子元素们是不会继承的。

常见的一个使用场景就是背景透明，文字还能清晰的显示出来：

div { background-color:rgba(213,213,213,.5) }

另外，jQuery中也有类似隐藏的一些操作。

比如：hide()、fadeOut()、等
我测试了一下，

$('button')
.on('click', function () { 
    $('#wrapper').hide(10000, function () { 
        //10秒执行完后 打印它的display 
        console.log($(this).css('display')); //none 
    }); 
});

这些都是利用了display:none;
可是，不是说 display:none 不能执行动画吗？？
我发现，在执行的过程中，它的各种属性还在变化，这时候的display还是block，
在执行过程中，width、height、opacity、这些都在缩减。
当执行完成的那一刻，display才变成了none。

hide.gif

第一次写博客，如果有不对的地方，欢迎指出。