Question

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

现在，我想在两个方向上进行这些转换，例如，取决于转换到（或从）哪个页面上来

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

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

我还没有从根本上了解useTransition()的工作方式，并且documentation受到很大的限制。这些示例看起来很棒，但很难理解。

This example似乎与我要实现的目标类似，但是代码感觉像是黑魔法：从y返回的每个对象的rows.map()属性似乎是与分配给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

希望对您有帮助。

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

1 个答案: