显示更改中断转换

问题描述：

我不知道为什么，但更改了父元素的显示属性在子元素上的转换。显示更改中断转换

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

小提琴： http://jsfiddle.net/bdu3fno2/5/

注：我知道，改变显示器是没有必要在这个特定的CA se，我可以改变不透明度，它会很好地工作，但有趣的是知道，为什么浏览器的行为是这样的 - 这是一种优化？我不认为这是CSS规范的一部分。

使用'知名度：hidden' /'知名度：visible'，而不是显示。如您所见，转换不适用于显示更改 – Danield 2014-12-02 10:06:03

...至于*为什么*显示更改导致转换不起作用 - 这可能是因为它们之间的布局更改导致无法在它们之间转换。 'visibility'属性是不同的，因为你不改变布局 - 只是显示/隐藏已经存在的内容。 – Danield 2014-12-02 10:18:13

答

使用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>

显示更改中断转换

相关推荐