title: Why does transition-delay not work on a child element when parent is shown?
body: <p>This is probably best illustrated with an example. I have a <code>parent</code> and a <code>child</code>. The parent is hidden by default unless it has an <code>in</code> class. Its child should transition its <code>background-color</code> from green to white, after a 3s delay, only once the parent receives the <code>in</code> class.</p>
  <p>So when the parent is shown, the child's background color is already white. There's no 3 second period of orange, with a transition to white. Can someone explain what's happening here?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('button.show').on('click', () =&gt; {
    $('.parent').addClass('in');
  });
  
  $('button.hide').on('click', () =&gt; {
    $('.parent').removeClass('in');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent, .child {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .parent {
    background-color: orange;
    width: 300px;
    height: 300px;
  }
  
  .child {
    background-color: green;
    padding: 20px;
    width: 150px;
    height: 150px;
    transition: background-color 1s linear;
  }
  
  .parent:not(.in) {
    display: none;
  }
  
  .parent.in .child {
    background-color: white;
    transition-delay: 3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="parent"&gt;
    &lt;div class="child"&gt;
      &lt;span&gt;Background should start green, then turn white, but transition isn't happening.&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;button type="button" class="show"&gt;Show parent&lt;/button&gt;
  &lt;button type="button" class="hide"&gt;Hide parent&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>