Js部分
const [showStatus, setShowStatus] = useState(true);
const handleBack = () => {
setShowStatus(false);
};
<CSSTransition
in={showStatus}
timeout={300}
classNames="fly" //自己定义
appear={true}
unmountOnExit
onExited={props.history.goBack}
>
<Container>
<Header title="返回" handleClick={handleBack}></Header>
</Container>
</CSSTransition>
css部分
transform-origin: right bottom;
&.fly-enter,
&.fly-appear {
transform: rotateZ(30deg) translate3d(100%, 0, 0);
}
&.fly-enter-active,
&.fly-appear-active {
transition: transform 0.3s;
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
&.fly-exit {
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
&.fly-exit-active {
transition: transform 0.3s;
transform: rotateZ(30deg) translate3d(100%, 0, 0);
}
&.normal-enter,
&.normal-exit-done {
.top {
transform: translate3d(0, -100px, 0);
}
.bottom {
transform: translate3d(0, 100px, 0);
}
}
&.normal-enter-active,
&.normal-exit-active {
.top,
.bottom {
transform: translate3d(0, 0, 0);
transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32); //贝塞尔曲线
}
opacity: 1;
transition: all 0.4s;
}
&.normal-exit-active {
opacity: 0;
}
学习自 神三元大佬
