Nested ReactTransitionGroups componentWillLeaves don't get triggered

Question

I have a top-level ReactTransitionGroups that have children that each have components with their own ReactTransitionGroups

Using transitionAppear={true}, I'm able to get the children's componentWillAppears to trigger

But when the parent needs to animate out, the child ReactTransitionGroups don't seem to know they should go to componentWillLeave

How can I have the parent's componentWillLeave tell its children that they need to transition out, and only callback when they have done that?

So ideally,

Needs to animate in -> parent animates in -> children animate in Need to animate out -> children animate out -> parent animates out,

Answer 1

I know this is an old question but I just had a similar problem and figured it out. Both componentWillAppear() and componentWillEnter() block any other animations until their callback is called. Make sure your componentWillAppear calls the callback

if you're using TweenMax like me, you can call the callback with the onComplete property passed to whichever Tween method you choose.

componentWillAppear(callback) {
  TweenMax.from(
    component,
    .4,
    { autoAlpha: 1, ease: Power2.eastOut, onComplete: callback }
  );
}

Hope this helps you or someone else down the road.