How to add transitions/effects to display:block - html

Question

I've a div like this:
.x{
...
}
And a sort of "submenu" initially hidden:
.x_submenu {
...
display:none;
...
}
The submenu will be visible only when the user is on the x div:
div.x:hover .x_submenu {display:block; }
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

Answer 1

The best option is with opacity:
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;
}
see demo: http://jsfiddle.net/wyKyT/

Answer 2

you won't be able to make transition work on 'display' property.
You will have to achieve this using the 'opacity' property.
Related to :
Transitions on the display: property
-webkit-transition with display
Jim Jeffers explained :
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+ */
}

Answer 3

No, there is not. CSS transitions work only for scalar values, so they can be applied to properties dealing with dimensions, colors (as these are represented in rgb values as well), opacty, etc. Other values like display, float, font-family etc cannot be transitioned as there are no possible intermediate states to display. You will have to fall back to using JavaScript or try to work with properties like opacity or applying workarounds like height: 0 to height: 100px

Answer 4

you can change display: none; to opacity: 0; (keeping in mind all browser compatibilities), and display: block; to opacity: 1;
the transition should work. And should you wish to make the items invisible to the mouse (unclickable or undetectable) while they are at 0 opacity, you can add
pointer-events: none;
together with the strip where it is at opacity: 0; and
pointer-events: auto;
where it is visible.