如何使用react spring useTransition从左向右或反之亦然

Question

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

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

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

Answer 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)"
}
});

Answer 2

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

要反转方向，只需反转两个百分比的符号。

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

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