Javascript 嵌套的CST转换在另一个CST转换中？

我可能会误解这整件事，但我正在尝试使用React和React Transition Group制作一些css动画

但是对于我下面的代码，嵌套（最后一个）CSTransition组件不会触发退出动画。不可能像这样使用React过渡组吗？ 我希望这段代码足以说明它的结构：

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>
    );

非常感谢。

---

如果我需要提供一个例子，请告诉我。

我最近做了一件非常类似的事情，它对我来说很好。 您使用的是哪个版本的react转换组

<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>

{儿童}

“反应”：“16.8.6” “反应过渡组”：“^4.2.1”

<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>