How to add transitions/effects to display:block

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

score 2 · Answer 1 · answered Feb 25 '13 at 20:36

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/

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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

Related to :

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

score 0 · Answer 3 · answered Feb 25 '13 at 20:34

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

score 0 · Answer 4 · edited Apr 14 '22 at 04:51

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.

How to add transitions/effects to display:block

4 Answers4

Linked