title: How to apply CSS transitions to modal window when parent is changed from display:none?
body: <p>I want to show a modal window (div) with a grey background (parent div). For reasons I don't understand, a transition applied to the modal window only works when the parent's element's display property isn't changed.</p>
  
  <p>The transition should be shown because there is a CSS transition applied to opacity and I changed the opacity to 1 by adding the class 'show'.</p>
  
  <p>The opacity is correctly changed: my window is visible. No transition is shown, however.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/3CD7U/1/" rel="nofollow">http://jsfiddle.net/3CD7U/1/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button id="button"&gt;click me&lt;/button&gt;
  &lt;div id="background"&gt;
      &lt;div id="box"&gt;
          &lt;h1&gt;Modal window&lt;/h1&gt;
          &lt;p&gt;I'd expect to see a transition when adding the show class. Unfortunately, the transition is only shown when the parent's display property isn't changed at the same time.&lt;/p&gt;
          &lt;p id="show-later"&gt;Here the transition is applied correctly, because of a delay. To work reliably however, the delay seems to have to be over 100ms, making the UI seem sluggish.&lt;p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#background{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: silver;
  }
  #box{
      position: relative;
      width: 50%;
      margin-top: 30px;
      margin-left: auto;
      margin-right: auto;
      padding: 20px;
      background: white;
      border: 1px solid grey;
  
      opacity: 0;
  }
  #show-later{
      opacity: 0;
  }
  #box.show,
  #show-later.show{
      opacity: 1;
      transition: opacity 500ms linear;
  }
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$("#background").hide();
  $("#button").click( function(){
    $("#background").show();
    $("#box").addClass("show");
      setTimeout( function(){
        $("#show-later").addClass("show");
      }, 2000);
  })
  </code></pre>
  
  <p>I don't want to rely on changing the opacity only, because old browsers.</p>
  
  <p>I've seen other websites with modal windows with transitions, but I can't figure out why those work and my fiddle not.</p>
  
  <p>I have a workaround: adding a class that includes an animation the moment the modal window has to be shown, but it's not as clean as just applying/removing CSS classes with transitions. </p>
  
  <p>Ideas for how to correctly add transitions to elements that change from display:none are welcome.</p>