为什么显示：阻止干扰不透明度？

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;
}