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

【问题标题】：How can I use react-spring useTransition to go from left to right or viceversa我如何使用 react-spring useTransition 从左到右或反之亦然
【发布时间】：2021-02-27 14:49:59
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-router react-router-dom react-spring

【解决方案1】：

解决方案有两个部分，您要确定何时要反转运动。在这种情况下，您想在个人资料页面上反转它。 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)"
    }
  });

【讨论】：

我认为这可能是解决方案。非常感谢！！

【解决方案2】：

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

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

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

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

【讨论】：