我正在使用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中来实现的?
答案 0 :(得分:1)
检出<TransitionGroup>
组件的childFactory属性。我还没有尝试使用嵌套的<CSSTransition>
组件,但是通常可以像这样使用它:
<TransitionGroup
childFactory={child => React.cloneElement(child)}
>
<CSSTransition
in={props.showWindow}
timeout={400}
classNames={classes.exitTransition}
>
<ChildComponent/>
</CSSTransition>
</TransitionGroup>