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

【问题标题】：How to animate exit with react-transition-group如何使用 react-transition-group 为退出设置动画
【发布时间】：2019-03-07 17:02:09
【问题描述】：

我正在使用 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 中来做到这一点吗？

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

查看<TransitionGroup> 组件的childFactory 属性。我没有尝试使用嵌套的<CSSTransition> 组件，但它通常可以像这样使用：

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

【讨论】：