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

Question

我有一个类似的div：

.x{
   ...
}

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

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

只有当用户在xdiv:上时，子菜单才可见

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

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

Answer 1

最好的选择是不透明度：

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/

Answer 2

您将无法在"display"属性上进行转换。您必须使用"opacity"属性来实现这一点。

相关：

• 显示器上的转换：特性
• -带显示器的webkit转换

Jim Jeffers解释道：

为了解决这个问题，总是允许元素成为显示块，但通过调整以下任何方式来隐藏元素：

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+ */
}

Answer 3

不，没有。CSS转换仅适用于标量值，因此它们可以应用于处理维度、颜色(因为这些也在rgb值中表示(、opacty等的属性。其他值(如display、float、font-family等(无法转换，因为没有可能的中间状态可以显示。您将不得不重新使用JavaScript，或者尝试使用opacity等属性，或者将height: 0等变通方法应用于height: 100px

Answer 4

您可以将display: none;更改为opacity: 0;(记住所有浏览器兼容性(，并显示：block；不透明度：1；过渡应该会奏效。如果你想让鼠标看不到项目(不可点击或不可检测(，而它们的透明度为0，你可以添加

pointer-events: none;

以及位于opacity: 0;和处的条带

pointer-events: auto;

在可见的地方。