我如何使用 react-spring useTransition 从左到右或反之亦然

Question

我有一个Switch和一个Router，每当路由改变时，它都是从左到右，我想知道是否有一种简单的方法可以根据变化从右到左动画路线。提前致谢。

https://codesandbox.io/s/page-transition-with-react-router-and-react-spring-b07jp

我在网上找到了这个例子，我想知道当你点击个人资料时它是如何从右到左的。

Answer 1

该位置由该代码第 46-49 行中的 transform: 'translate(__)' 控制。您可以在 MDN 上阅读有关 CSS transforms and the translate function 的更多信息。

反转方向所需要做的就是反转两个百分比的符号。

在 from 样式中将 translate(100%,0) 更改为 translate(-100%,0)。

在 leave 样式中将 translate(-50%,0) 更改为 translate(50%,0)。

Answer 2

解决方案分为两部分，您要确定何时要反转运动。在这种情况下，您想在个人资料页面上撤消它。 location.pathname === "/profile-page" 然后你必须根据这些信息来切换方向。这在另一个答案中有描述。整个例子可以是这样的：

  const { location } = useContext(__RouterContext);
  const reverse = location.pathname === "/profile-page";
  const transitions = useTransition(location, (location) => location.pathname, {
    from: {
      position: "absolute",
      width: "100%",
      opacity: 0,
      transform: reverse ? "translate(-100%,0)" : "translate(100%,0)"
    },
    enter: { opacity: 1, transform: "translate(0%,0)" },
    leave: {
      opacity: 0,
      transform: reverse ? "translate(50%,0)" : "translate(-50%,0)"
    }
  });

我如何使用 react-spring useTransition 从左到右或反之亦然

How can I use react-spring useTransition to go from left to right or viceversa

reactjs

react-router

react-router-dom

react-spring