如何为display:block添加过渡效果/动画效果

Question

I've a div like this:

.x{
   ...
}

并且有一种初始情况下隐藏的“子菜单”：

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

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

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

现在，我想通过一个交易或效果使其可见性更加“缓慢”地显示出来。 是否有一种方法可以实现这个目标，可能是跨浏览器的解决方案？ 谢谢， A

- andreaxi

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/

- Mirko Mukaetov

Answer 2

你无法通过'transition'属性来实现'display'的过渡效果。你需要使用'opacity'属性来实现这一点。

相关链接：

- 关于'display'属性的过渡效果 - -webkit-transition与'display'属性 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+ */
}

- Milche Patern

Answer 3

你可以将 display: none; 改为 opacity: 0;（考虑所有浏览器的兼容性），并将 display: block; 改为 opacity: 1; 过渡效果应该会生效。如果你希望在物品处于 0 不透明度时使它们对鼠标不可见（无法点击或检测到），可以添加

pointer-events: none;

连同其所在的条带 opacity: 0; 一起

pointer-events: auto;

在哪里可见。

- xan

Answer 4

没有。CSS过渡仅适用于标量值，因此可以应用于处理尺寸、颜色（因为这些也表示为rgb值）、不透明度等属性。其他值，如display、float、font-family等无法过渡，因为没有可能的中间状态来显示。您将不得不退回使用JavaScript或尝试使用像opacity这样的属性或应用解决方法，例如将height: 0转换为height: 100px。

- Chris Danek