如何添加要显示的过渡效果:块 [英] 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.
相关于:
- 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屋!