title: How to transition child when parent goes from display: none to block
body: <p>I'm having trouble creating a flyout menu with a specific effect. The flyout goes from display:none to block and then I use jquery to animate opacity from 0 to 1 (and vice versa). This is necessary because otherwise the transition does not happen when the element has just had it's display property changed. I did not think that this would propagate to children. But inside of my flyout I have 4 columns of links that have an opacity transition, each with it's own delay so they come in one at a time. However, this does not work as the flyout appears. They are instantly at opacity: 1 and even with a long delay time it still does not work.</p>
  
  <p>Is there a way around this? I knew that CSS animation alongside a display change on the same element did not work, but finding out that any child animations also do not work is a little frustrating. I'd rather not have to write javascript when the CSS is so simple. But if javascript is the only answer, then that will be an easy solve.</p>
  
  <p>Here's a very simplified example of the code:</p>
  
  <pre><code>$flyout.addClass('in').animate({opacity: 1}, 200, "linear");
  </code></pre>
  
  <p>"in" is the class that causes the transition on the columns:</p>
  
  <pre><code>.flyout { display: none; }
  
  .flyout.in { display: block; }
  
  .columns li {
      opacity: 0;
      -webkit-transition: opacity 0.2s;
  }
  
  .flyout.in .columns li { opacity: 1; }
  
  // delay increases with each column
  .columns &gt; li:first-child {
      -webkit-transition-delay: 0.2s;
  }
  </code></pre>