How to add transitions/effects to display:block

问题

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

回答1:

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

回答2:

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/

回答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

来源：https://stackoverflow.com/questions/15075825/how-to-add-transitions-effects-to-displayblock

标签

html

css

css3

css-transitions