如何解决使用 React 路由器退出时,滑动过渡不起作用
我无法在与 React 路由器 4 连接的页面之间设置动画过渡。
我的页面是使用 weekDetailComponent 生成的,它从后端加载不同的数据,具体取决于它在其路径示例中收到的 weekId:“(rest of path)/weeks/92”,当用户向左或向右滑动屏幕页面时91 或 93 应分别滑入。
到目前为止,我已经设法通过 react-transition-group 使滑动过渡工作得很好,部分过渡有效。
但是,它不是在退出时设置动画,而是让之前的活动页面立即消失而不是滑出,我不知道为什么这不起作用。
这是我的App.tsx
代码,过渡状态用于决定动画需要向左还是向右。
function App() {
const location = useLocation();
const [transition,setTranstion] = useState(true);
const handleTransition = (value: boolean) => {
setTranstion(value);
};
return (
<TransitionGroup>
<CSSTransition
key={location.pathname}
classNames={transition ? "page-swipe-right" : "page-swipe-left"}
timeout={{ appear: 0,enter: 300,exit: 600 }}
appear
>
<Switch location={location}>
<Suspense fallback={<SplashScreen />}>
<Route path="/" exact component={AllPatients} />
<Route
path="/patients/:patientId/weeks/:weekId"
exact
render={(props) => (
<WeekDetailComponent
{...props}
transition={transition}
setTransition={(value: boolean) => handleTransition(value)}
/>
)}
/>
</Suspense>
</Switch>
</CSSTransition>
</TransitionGroup>
);
}
这里是weekDetailComponent中的相关代码,transition和setTransition被传递,以便它可以通知父级是否需要使用左动画或右动画。
type WeekDetailRouteParams = { patientId: string; weekId: string };
interface WeekDetailComponentProps {
transition: boolean;
setTransition: (value: boolean) => void;
}
type ComposedProps = RouteComponentProps<WeekDetailRouteParams> &
WeekDetailComponentProps;
export default function WeekDetailComponent({
match,transition,setTransition,}: ComposedProps) {
const swipeHandlers = useSwipeable({
onSwipedLeft: () => Navigation to previous week
onSwipedRight: () => Navigation to next week
});
return (
<div {...swipeHandlers}>
<div
className={`flexColumn page-swipe${transition ? "-right" : "-left"}`}
>
Components inside the page
</div>
</div>
这是我的滑动过渡的 css。
.page-swipe-left-appear .page-swipe-right-appear {
opacity: 0;
}
.page-swipe-left-enter .page-swipe-right-enter {
opacity: 1;
}
.page-swipe-left-exit {
animation: slideOutLeft 0.5s forwards;
opacity: 1;
}
.page-swipe-right-exit {
animation: slideOutRight 0.5s forwards;
opacity: 1;
}
.page-swipe-left-enter-active {
animation: slideInLeft 0.3s forwards ease-in-out;
}
.page-swipe-right-enter-active {
animation: slideInRight 0.3s forwards ease-in-out;
}
.page-swipe-left-exit-active {
opacity: 0;
}
.page-swipe-right-exit-active {
opacity: 0;
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%,0);
transform: translate3d(-100%,0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0,0);
transform: translate3d(0,0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0,0);
visibility: visible;
}
to {
-webkit-transform: translate3d(100%,0);
transform: translate3d(100%,0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%,0);
}
to {
-webkit-transform: translate3d(0,0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0,0);
visibility: visible;
}
to {
-webkit-transform: translate3d(-100%,0);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。