How to animate exit with react-transition-group

Question

I am using react-transition-group to create a modal that pops into view.

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>

);

However I am very confused on how to get this to animate out on exit. Since as soon as I sed props.showWindow = false. It destroys the whole component without giving it time to animate out.

Is there some what to do this by nesting this in a TransitionGroup?

score 2 · Accepted Answer · answered Mar 07 '19 at 09:02

Check out the childFactory prop of the <TransitionGroup> component. I haven't tried it with nested <CSSTransition> components, but it can normally be used like so:

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

How to animate exit with react-transition-group

1 Answers1