1

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

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

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

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

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

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

4

1 回答 1

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

我希望它有所帮助。

于 2019-07-17T20:52:04.857 回答