CSS transition from `display: none` on class change?

Question

I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.

Here's the relevant CSS:

#myelem {     opacity: 0;     display: none;     transition: opacity 0.4s ease-in, display 0.4s step-end;     -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;     -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;     -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end; } #myelem.show {     display: block;     opacity: 1;     transition: opacity 0.4s ease-out, display 0.4s step-start;     -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;     -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;     -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start; } 

The JavaScript to trigger the change is:

document.getElementById('myelem').className = "show"; 

But the transition doesn't seem to be happening - it's just jumping from one state to the other.

What am I doing wrong?

Answer 1

It does work when you remove the display properties.

#myelem {     opacity: 0;     transition: opacity 0.4s ease-in;     -ms-transition: opacity 0.4s ease-in;     -moz-transition: opacity 0.4s ease-in;     -webkit-transition: opacity 0.4s ease-in; } #myelem.show {     opacity: 1;     transition: opacity 0.4s ease-out;     -ms-transition: opacity 0.4s ease-out;     -moz-transition: opacity 0.4s ease-out;     -webkit-transition: opacity 0.4s ease-out; }​ 

JSFiddle.

The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.