jquery - 为什么显示:block interfere with opacity?

Question

#load {
opacity: 0;
display: none; /* is this a bad idea ? */
background-color: tomato;
transition: opacity 300ms ease;
}

#load.is-active {
        display: block; /* is this a bad idea ? */
        opacity: 1;
    }

添加 .is-active 类时没有淡入。我将问题追踪到 display:none/block，一旦删除它们，问题就解决了。

现在我的问题是为什么。为什么 block 会干扰不透明度？

此外 - 我如何从 View 中删除 #load 以在其下方的内容上启用点击事件，因此仅使用不透明度隐藏它是一个禁忌。 *(在我的现实生活中，一旦移除加载栏，您应该可以点击下面的内容)*

我做了这个 fiddle :http://jsfiddle.net/QKCbE/

Answer 1

如果您想尝试实现整个“ block ”转换难题，则必须采用其他方法。

沿着这些线的东西:

div {
  display: block;
  -webkit-transition: opacity 1s ease-out;
  opacity: 0; 
  height: 0;
  overflow: hidden;
}

div.active {
  opacity: 1;
  height: auto;
}