14

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

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/

一些注意事项：
我最初尝试转换显示，但正如 Edward 指出的那样，这是不可能的，并且已经尝试过上述方法，但也不起作用

解决了

看起来“过渡到”样式中的任何“显示”属性都会阻止任何过渡动画的发生。要解决这个问题。我将要显示的孩子的宽度设置为 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/

4

2 回答 2

13

根据这篇关于 CSS 过渡的文章（由MDN 页面上的 CSS 过渡引用） ，该display属性不是可以过渡的：

您需要转换几个属性或值，但在撰写本文时它们都未指定且不受支持：

  • background-image，包括梯度
  • ...
  • display在没有和其他任何东西之间

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

编辑：

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

display: none;

从该span div部分中，弹出菜单将使用您将鼠标悬停在其上时指定的过渡。

由于从display:none;to的过渡display:inline-block无法动画化，因此该属性可能仅在过渡结束时更改 - 因此 opacity 会在div仍然不可见时进行动画处理。

于 2012-07-14T22:00:05.833 回答
-2

你试过使用-webkit-transition-delay: ;吗？如果没有，这可能是您正在寻找的东西？

对代码做了一些更改：

span div { 
position: absolute;
left: 5px;
top: 5px;
border: 1px solid #000;
background-color: #888;
width: 0px;
opacity: 0;
cursor: pointer;

}

span:hover div {
display: inline-block;
-webkit-transition-delay: 2s;
width: 150px;            
opacity: 1;

}​</p>

这是一个演示

于 2012-07-14T22:33:06.030 回答