[英]How to animate exit with react-transition-group
I am using react-transition-group to create a modal that pops into view.我正在使用 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>
); );
However I am very confused on how to get this to animate out on exit.但是,我对如何在退出时设置动画感到非常困惑。 Since as soon as I sed props.showWindow = false.因为一旦我 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?通过将它嵌套在 TransitionGroup 中,有什么方法可以做到这一点吗?
Check out the childFactory prop of the <TransitionGroup>
component.查看<TransitionGroup>
组件的childFactory道具。 I haven't tried it with nested <CSSTransition>
components, but it can normally be used like so:我还没<CSSTransition>
嵌套的<CSSTransition>
组件尝试过它,但它通常可以像这样使用:
<TransitionGroup
childFactory={child => React.cloneElement(child)}
>
<CSSTransition
in={props.showWindow}
timeout={400}
classNames={classes.exitTransition}
>
<ChildComponent/>
</CSSTransition>
</TransitionGroup>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.