如何基于React-Router V4中的路线的哪个方向实现动画

Question

我已经成功地实现了使用React-Router V4和React-Motion实现了路线过渡动画。目前，我只能在一个方向上制作过渡动画。例如，我使用slideleft过渡到新页面。但是，当倒回事发生过渡时，我想拥有slidight。一般而言，我想知道如何根据背部或前进状态钩住动画。

Answer 1

v4仍在alpha中，因此此答案可能会改变。

在V4 Alpha 6中，您可以通过上下文访问history实例。实例的属性之一是action，它是最后一个导航的操作类型。此可能的值是PUSH（正向），POP（Back）和REPLACE（相同的位置，但也许像动画一样将其视为前进）。

const { action } = this.context.history

您可以根据任何可能的值action确定动画方向。

V4的最新重构（实际上未发布，但可通过GitHub获得）删除了history上下文变量，因此我不再可能所描述的内容。也就是说，存在一个问题，希望很快成为将action添加为通过router上下文可用的值的PR。

const { action } = this.context.router.getState()

编辑

显然，由于使用向前按钮也是popstate事件，因此关联的操作是POP。这使得知道是向前还是向后动画更加困难。我可能只是将所有POP s视为背部，但这是一个酌情决定。