html - 显示变化中断过渡

Question

我不知道为什么，但是更改父元素的显示属性会中断子元素的过渡。

HTML

<div class="grandfather">
    <div class="father">
        <div class="child1 children"></div>
        <div class="child2 children"></div>
    </div>
</div>

CSS

.grandfather{
    width: 500px;
    height: 500px;
    background: green;
}

.father{
    height: 250px;
    background: red;
    display: none;
}

.grandfather:hover .father{
    display: block;
}

.child1,
.child2{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block;
    opacity: 0;
    transition: all 1s linear;
}

.grandfather:hover .children{
    opacity: 1;
}

fiddle : http://jsfiddle.net/bdu3fno2/5/

注意:我知道在这种特殊情况下不需要更改显示，我可以只更改不透明度并且效果很好，但有趣的是，为什么浏览器会这样 -这是某种优化吗？我不认为那是 CSS 规范的一部分。

Answer 1

使用 opacity 和 visibility

.grandfather {
  width: 500px;
  height: 500px;
  background: green;
}
.father {
  height: 250px;
  background: red;
  opacity: 0;
  visibility: hidden;
  transition: all 1s linear;
}
.grandfather:hover .father {
  opacity: 1;
  visibility: visible;
}
.child1,
.child2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  opacity: 0;
  transition: all 1s linear;
}
.grandfather:hover .children {
  opacity: 1;
}

<div class="grandfather">
  <div class="father">
    <div class="child1 children"></div>
    <div class="child2 children"></div>
  </div>
</div>