用于子元素的悬停时的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;
}?

截至目前,当跨度悬停时,div在显示之前没有延迟.我该如何修复它以便暂停？

在这里小提琴:http://jsfiddle.net/SReject/vmvdK/

一些注意事项:
我原本试图过渡显示器,但正如爱德华指出的那样,这是不可能的,并且有意义尝试了以上哪些,也不起作用

解决了

看起来"过渡到"样式中的任何"显示"属性都将阻止任何过渡动画的发生.解决这个问题.我将要显示的子项的宽度设置为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;
}?

在这里小提琴:http://jsfiddle.net/SReject/vmvdK/

Answer 1

根据关于CSS转换的这篇文章,由CSS转换的MDN页面引用,该display属性不是可以转换的属性:

您要转换的属性或值有几个,但在编写时未指定和不支持:

• background-image,包括渐变
• ...
• display 介于无与其他之间

因此将该transition: display 5s;属性应用于您的div行为无效.

编辑:

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

display: none;

从该span div部分开始,弹出菜单将使用您将鼠标悬停在其上时指定的过渡.

由于转换为display:none;to display:inline-block无法设置动画,因此此属性可能仅在转换结束时更改 - 因此不透明度div仍然不可见时动画.