title: CSS transition from `display: none` on class change?
body: <p>I've started using transitions to "modernise" the feel of a site. So far, <code>:hover</code> 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.</p>
  
  <p>Here's the relevant CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>The JavaScript to trigger the change is:</p>
  
  <pre><code>document.getElementById('myelem').className = "show";
  </code></pre>
  
  <p>But the transition doesn't seem to be happening - it's just jumping from one state to the other.</p>
  
  <p>What am I doing wrong?</p>