如何添加要显示的过渡效果：块 [英] How to add transitions/effects to display:block

问题描述

我有这样的div：

.x{
   ...
}

最初隐藏的一种子菜单：

And a sort of "submenu" initially hidden:

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

子菜单仅在用户使用时可见在x div上：

The submenu will be visible only when the user is on the x div:

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

现在，我想通过交易或使可见度提高的效果使其可见更慢。
是否可以通过跨浏览器解决方案来实现该目标？
谢谢，
A

Now, I'd like to make it visible with a transaction or an effect that makes the visibility more "slow". Is there a way to achieve that goal, possibly with a cross-browser solution? Thanks, A

推荐答案

您将无法在显示上进行过渡属性。
您必须使用'opacity'属性来实现此目的。

you won't be able to make transition work on 'display' property. You will have to achieve this using the 'opacity' property.

相关于：

• 显示的过渡：属性


• -webkit-transition with display

• Transitions on the display: property
• -webkit-transition with display

Jim Jeffers 解释：

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

To work around this always allow the element to be display block but hide the element by adjusting any of these means:

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

，为了您的过渡，使其成为跨浏览器：

and, for your transition, to make it 'cross-browser' :

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

这篇关于如何添加要显示的过渡效果：块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！