如何添加过渡/效果以显示：块

Question

我有一个这样的 div：

 .x{
   ...
}

还有一种最初隐藏的“子菜单”：

 .x_submenu {
   ...
   display:none;
   ...
}

只有当用户在 x div 上时，子菜单才会可见：

 div.x:hover .x_submenu {display:block; }

现在，我想通过事务或使可见性更“慢”的效果使其可见。有没有办法实现这个目标，可能是跨浏览器的解决方案？谢谢

原文由 andreaxi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您将无法对“显示”属性进行转换。您必须使用“不透明度”属性来实现此目的。

相关 ：

• 显示上的转换：属性
• -webkit-transition with display

吉姆杰弗斯 解释说：

要解决此问题，请始终允许元素显示块，但通过调整以下任何一种方式隐藏元素：

 Set the height to 0.
Set the opacity to 0.
Position the element outside of the frame of another element that has overflow: hidden.

并且，为了您的过渡，使其成为“跨浏览器”：

 .transition {
 -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera     12.50+ */
}

原文由 Milche Patern 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最好的选择是不透明度：

HTML:

 <p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

CSS：

 div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
opacity:100;
width:300px;
}

看演示：http: //jsfiddle.net/wyKyT/

原文由 Mirko Mukaetov 发布，翻译遵循 CC BY-SA 3.0 许可协议