这个问题我已经有一个多月了,一遍又一遍地提出新的想法,但是我无法解决。一定有一个,这是微不足道的!
我的目标是通常将页面从左侧滑入并向右滑出。反转时(用户单击“后退”按钮或历史记录显示一条路线已弹出),页面应退至右侧,而下一条路线应从左侧(相反)进入。
一切正常,但是当我按路线然后POP路线时,下一页将同时向右退出并从右进入。输入页面在有时间更新之前使用旧姿势。如果我再次打开POP,则它可以正常工作,新页面从左侧滑动,而旧页面向右滑动。这是我第一次使用POP进行更改。我非常依赖const反向值。当我第一次更改POP时,该组件仅渲染一次,而reverse = true则仅渲染一次。
行为视频的网址:https://drive.google.com/file/d/1-3GCawYtjXBbkZlVe0cUV1_Z7ikzN6Nr/view?usp=drivesdk
我有一个像这样的AnimatedSwitch组件
export const AnimatedSwitch = ({ location, children, ...rest }) => {
const clickedBack = useSelector(state => state.interfaceReducer.clickedBack);
const routePopped = useSelector(state => state.routeReducer.routePopped);
const reverse = clickedBack || routePopped;
const onRest = () => {
clickedBack && dispatch(toggleClickedBackButton(false));
}
return (
<PoseGroup
animateOnMount={true}
preEnterPose={reverse ? "leftSide" : "rightSide"}
exitPose={reverse ? "rightSide" : "leftSide"}
onRest={onRest}
reverse={reverse}
>
<ContextRouteAnimation poseKey={`${reverse}-${location.pathname}`} key={location.pathname} reverse={reverse}>
<Switch location={location} {...rest}>
{children}
</Switch>
</ContextRouteAnimation>
</PoseGroup>
)
}
这是ContextRouteAnimation姿势组件:
const ContextRouteAnimation = posed.div({
enter: {
opacity: 1,
x: "0%",
transition: {
type: "tween",
ease: "easeInOut",
duration: TIMING.SLOW,
},
},
leftSide: {
x: "-100%",
opacity: 0,
transition: {
type: "tween",
ease: "easeInOut",
duration: TIMING.SLOW,
},
},
rightSide: {
x: "100%",
opacity: 0,
transition: {
type: "tween",
ease: "easeInOut",
duration: TIMING.SLOW,
},
},
});
我已经尝试了多种方法,例如