在另一个 CSSTransition 中嵌套 CSSTransitions？答案

【问题标题】：Nested CSSTransitions inside another CSSTransition?在另一个 CSSTransition 中嵌套 CSSTransitions？
【发布时间】：2019-11-09 14:53:52
【问题描述】：

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

但是对于我下面的代码，exit animations 不会为嵌套的（最后一个）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']
    };

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

【问题讨论】：

标签： javascript css reactjs react-transition-group

【解决方案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>

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

【讨论】：