Вложенные CSSTransitions внутри другого CSSTransition? - PullRequest
Новая
       26

Вложенные CSSTransitions внутри другого CSSTransition?

0 голосов
/ 27 июня 2019

Я мог бы неправильно понять все это, но я пытаюсь сделать некоторые анимации CSS, используя React и React Transition Group.

Но что касается моего кода ниже, 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']
    };

Очень ценится. Если мне нужно привести пример, дайте мне знать.

1 Ответ

0 голосов
/ 10 июля 2019

Я недавно работал над чем-то очень похожим, и он прекрасно работает для меня.Какую версию группы реакции-перехода вы используете? 


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

...