如何使用react-transition-group为退出设置动画

时间:2019-02-21 04:58:36

标签: reactjs react-transition-group

我正在使用react-transition-group创建弹出视图的模式。

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 :(得分:1)

检出<TransitionGroup>组件的childFactory属性。我还没有尝试使用嵌套的<CSSTransition>组件,但是通常可以像这样使用它:

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