How to transition child when parent goes from display: none to block

Question

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 vers

Answer 1

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.

It does not only apply to the same element, but the entire sub-tree - as the entire sub-tree is not rendered.

• you can set display: block on the wrapper, then force a reflow (by flushing the style buffer with wrapperElement.offsetHeight;), then add a class that sets opacity:1 to your children (or do whatever you're doing to kick off the animations).
• you can use a different method of visually hiding your wrapper, eg width: 0; height: 0; overflow: hidden; visibility: hidden; (or, for nicer transitions transform: scale(0); visibility: hidden; pointer-events: none;)

As soon as display:none is involved, you're screwed when it comes to transitions. The best way is to avoid it. I've been using the second option without any significant problems for quite a while now.

---

edit after OP added some demo code:

• the .animate() of the wrapper can be done in CSS as well
• do not only use the vendor-prefixed CSS property -webkit-transition, but the proper transition as well
• // delay increases with each column looks like a misconception. all elements the selector .columns > li:first-child applies to will have the exact same delay - they won't wait for the previous element to finish its transition. If you want to define that in CSS, you'll have to play with :nth-child() or one of its cousins