javascript - 在另一个 CSSTransition 中嵌套 CSSTransitions？

Question

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

但是对于我下面的代码，退出动画 不会为嵌套的(最后一个)CSSTransition 组件触发。像这样使用 React Transition Group 是不可能的吗？我希望这段代码足以说明它的结构:

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

不同样式的对象如下所示:

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']
    };

非常感谢。如果我需要提供示例，请告诉我。

Answer 1

我最近在做一些非常相似的事情，对我来说效果很好。您使用的是哪个版本的 react-transition-group？

<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 过渡组”:“^4.2.1”