React Spring：与 react-router 一起使用时 useTransition() 中的动态值

Question

在this example 中，您可以看到由路由更改触发的页面之间的一些不错的过渡。 （取自LevelUp Tutorials'React Animation 课程，非常感谢 Scott Tolinski）。

现在我想让这些转换发生在两个方向上，具体取决于它转换到（和从）哪个页面，例如：

• 第一页 -> 第二页（两页都从左向右过渡）
• 第三页 -> 第一页（两页都从右向左过渡）
• 等

在第一个示例中，我创建了 this example，其中 x 的值是动态的，应根据转换的方向评估为 100 或 -100。

我还没有从根本上理解useTransition() 的工作原理，而且documentation 相当有限。这些例子看起来很神奇，但很难理解。

This example 似乎与我试图实现的目标类似，但代码感觉就像是黑魔法：从rows.map() 返回的每个对象的y 属性似乎与y 有关分配给enter 和update 属性的函数的值，因为如果我删除它，我会收到错误：Cannot read property 'replace' of undefined。它是如何工作的？

Answer 1

这个问题有两个部分。

• 确定方向

• 更改动画

我创建了一个示例来解决第二部分。当用户点击第一页时，我会反转动画。

const reverse = location.pathname === '/';
const transitions = useTransition(location, location => location.key, {
  from: { opacity: 0, transform: `translate3d(${reverse ? '-100%' : '100%'},0,0)` },
  enter: { opacity: 1, transform: "translate3d(0,0,0)" },
  leave: { opacity: 0, transform: `translate3d(${reverse ? '100%' : '-100%'},0,0)` },
  // "initial: null" should only disable the 'from' initial transition, not the subsequent 'leave' transition (on the first manually triggered transition)
  initial: null
});

这里是沙盒：https://codesandbox.io/s/spring-transition-with-routes-215t8

对于确定何时反转动画的第一部分，我会在每次点击时存储路径并将下一个与上一个进行比较。这里有一个存储路径的例子：Check history previous location before goBack() react router v4

希望对你有帮助。