Как оживить выход с помощью response-transition-group - PullRequest
Новая
       27

Как оживить выход с помощью response-transition-group

0 голосов
/ 21 февраля 2019

Я использую реагирующую группу для создания модального окна.

const AnimatedModal: SFC<AnimatedModalProps> = (props: AnimatedModalProps) => (
<CSSTransition in={props.showWindow} unmountOnExit key={1} classNames={'modal-fade'} timeout={300}>
    <BaseModal onCloseHandler={props.onCloseHandler} showWindow={props.showWindow}>
        <CSSTransition
            in={props.showWindow}
            key={2}
            unmountOnExit
            classNames={props.animationClassNames}
            timeout={300}
        >
            <ModalPanel onCloseHandler={props.onCloseHandler}>{props.children}</ModalPanel>
        </CSSTransition>
    </BaseModal>
</CSSTransition>

);

Однако я очень смущен тем, как заставить это оживить при выходе.Так как, как только я sed props.showWindow = false.Он уничтожает весь компонент, не давая ему времени на анимацию.

Есть ли что-то, что можно сделать, вложив это в TransitionGroup?

1 Ответ

0 голосов
/ 07 марта 2019

Проверьте childFactory опору компонента <TransitionGroup>.Я не пробовал его с вложенными <CSSTransition> компонентами, но обычно его можно использовать так: 

 <TransitionGroup
     childFactory={child => React.cloneElement(child)}
  >
    <CSSTransition 
      in={props.showWindow} 
      timeout={400} 
      classNames={classes.exitTransition}
    >
      <ChildComponent/>
    </CSSTransition>
  </TransitionGroup>
...