jquery - 为什么 display:block 会干扰不透明度？

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，一旦它们被删除，问题就解决了。

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

此外 - 我如何#load从视图中删除以启用对其下方内容的点击事件，因此仅使用不透明度隐藏它是不行的。*（在我的现实生活中，一旦加载栏被删除，你应该可以点击下面的东西）*

我做了这个小小提琴：http: //jsfiddle.net/QKCbE/

Answer 1

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

沿着这条线的东西：

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

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