子元素悬停时的 Css 过渡

Question

我试图在父元素悬停时暂停子元素的显示。

HTML:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

CSS:

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}​

截至目前，当 span 悬停时，div 在显示之前没有延迟。我将如何修复它以便暂停？

在这里 fiddle :http://jsfiddle.net/SReject/vmvdK/

一些注意事项:
我最初尝试转换显示，但正如爱德华指出的那样，这是不可能的，并且尝试了上面的方法，但它也不起作用

已解决

似乎“过渡到”样式中的任何“显示”属性都会阻止任何过渡动画的发生。解决这个问题。我将要显示的 child 的宽度设置为 0px 并使其完全透明。然后在“过渡到”样式中，我设置了正确的宽度，并使 div 变为实体:

HTML:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

CSS:

span { 
    position: relative; 
}
span div { 
    position: absolute;

    width: 0px;
    opacity: 0;
    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    width: 150px;
    opacity: 1;
}​

在这里 fiddle :http://jsfiddle.net/SReject/vmvdK/

Answer 1

根据 this article在 CSS 转换上，由 MDN page on CSS transitions 引用, display 属性不是可以转换的:

There are several properties or values you’ll want to transition, but which are both unspecced and unsupported at the time of writing:

• background-image, including gradients
• ...
• display between none and anything else

因此将 transition: display 5s; 属性应用到您的 div 没有任何效果。

编辑:

根据您更新的代码，只要您不指定 display 属性，您就可以通过不透明度和宽度实现您想要的效果。只需删除行

display: none;

来自 span div 部分，当您将鼠标悬停在弹出菜单上时，弹出菜单将使用您指定的过渡效果。

由于从 display:none; 到 display:inline-block 的过渡不能被动画化，这个属性可能只在过渡结束时改变 -所以当 div 仍然不可见时，不透明度会产生动画效果。