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

Question

在 this example you can see some nice transition between pages triggered by the route change. (took from LevelUp Tutorials' React 动画课程中，非常感谢 Scott Tolinski)。

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

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

根据我创建的第一个示例 this example，其中 x 的值是动态的，应根据 100 或 -100 的方向计算过渡。

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

This example 似乎做了与我想要实现的类似的事情，但代码感觉像是黑魔法：从 [= 返回的每个对象的 y 属性 16=] 似乎与分配给 enter 和 update 属性的函数的 y 值有关，因为如果我删除它，我会得到错误：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

希望对您有所帮助。

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

React Spring: dynamic values in useTransition() when using it alongside react-router

javascript

reactjs

react-router

react-spring