React Router + React Pose沿“ POP”或“ PUSH”方向滑入/滑出

时间:2019-07-19 11:50:09

标签: reactjs animation react-router transition react-pose

这个问题我已经有一个多月了,一遍又一遍地提出新的想法,但是我无法解决。一定有一个,这是微不足道的!

我的目标是通常将页面从左侧滑入并向右滑出。反转时(用户单击“后退”按钮或历史记录显示一条路线已弹出),页面应退至右侧,而下一条路线应从左侧(相反)进入。

一切正常,但是当我按路线然后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,
        },
    },
});

我已经尝试了多种方法,例如

  • 向下传递到ContextRouteAnimation并使用preEnter +退出姿势。
  • 直接在ContextRouteAnimation上设置姿势
  • 将组件存储为状态,并且仅在更新新姿势之后才对其进行更新,然后触发另一个渲染

0 个答案:

没有答案