Nested CSSTransitions inside another CSSTransition?

Question

I might misunderstand this whole thing, but I'm trying to do some css animations using React and React Transition Group.

But as for my code below, the exit animations wont get triggered for the nested (last) CSSTransition component. Is it not possible to work with React Transition Group like this? I hope this code is enough to show how it is structured:

return(
        <TransitionGroup component={null}>
            {active && 

                    <CSSTransition in={active} timeout={time} classNames={overlayAnimationStyles}>

                        <div className={styles.video}>
                            <div className={styles.video__overlay} onClick={handleCloseClick}/>

                            <CSSTransition appear in={active} timeout={time} classNames={contentAnimationStyles} onEntered={handlePlayerEntered}>
                                <div className={styles.video__content}>
                                    <div className={styles.video__player}>
                                        {embedPlayer && <iframe
                                        src={`https://www.youtube.com/embed/${video}`}
                                        frameBorder="0" allowFullScreen></iframe>}
                                    </div>
                                </div>
                            </CSSTransition>

                        </div>
                    </CSSTransition>
            }
        </TransitionGroup>
    );

The different styles objects look like this:

const overlayAnimationStyles = {
        exit: videoAnimationStyles['overlay-exit'],
        exitActive: videoAnimationStyles['overlay-exit-active'],
        enter: videoAnimationStyles['overlay-enter'],
        enterActive: videoAnimationStyles['overlay-enter-active'],
    };

    const contentAnimationStyles = {
        appear: videoAnimationStyles['content-appear'],
        appearActive: videoAnimationStyles['content-appear-active'],
        exit: videoAnimationStyles['content-exit'],
        exitActive: videoAnimationStyles['content-exit-active']
    };

Much appreciated. If I need to provide an example, let me know.

score 0 · Answer 1 · answered Jul 10 '19 at 13:44

I've recently worked on something very similar and it works fine for me. Which version of react-transition-group are you using?


<CSSTransition

    in={open}
    // Wait for animation to finish before unmount.
    timeout={{ enter: 0, exit: EXIT_ANIMATION }}
    onEnter={handleOnEnter}
    onExited={handleOnClose}
    classNames={{
      enter: classNames({ 'component1--enter-fade': fadeContentOnEnter }),
        enterDone: classNames('component1--enter-done', { 'component1--enter-fade': fadeContentOnEnter }),
        exit: classNames('component1--exit', { 'component1--exit-fade': fadeContentOnExit }),
    }}
    unmountOnExit
>

    <div role="presentation" className="component1" onClick={handleOnClick}>
      <CSSTransition
        in={open}
        // Wait for animation to finish before unmount.
        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
        classNames={classNames(
          `component2--open-${position}`,
          showcomponent2Border && `component2--border-${position}`,
          {
            'component2--fixed': component2PositionFixed,
          },
          'component2',
        )}
        appear
        unmountOnExit
      >
        <div className="component2">{children}</div>
      </CSSTransition>
    </div

>
</CSSTransition>

"react": "16.8.6" "react-transition-group": "^4.2.1"

Nested CSSTransitions inside another CSSTransition?

1 Answers1