如何根据路由器在react-router v4中的转换方向实现动画？

Question

我已经使用react-router v4和react-motion成功实现了路由转换动画。目前我只能在一个方向上制作过渡动画。例如，我使用slideLeft转换到新页面。但是我希望在goBack发生转换时使用slideRight。一般来说，我想知道如何根据后退或前进状态挂钩动画。

Answer 1

v4仍处于alpha状态，因此这个答案很可能会改变。

在v4 alpha 6中，您可以通过上下文访问history实例。实例的一个属性是action，它是最后一个导航的操作类型。可能的值是PUSH（转发），POP（返回）和REPLACE（同一个地方，但可能会将其视为动画的转发）。

const { action } = this.context.history

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

v4的最新重构（实际上没有发布，但通过GitHub可用）删除了history上下文变量，因此上面描述的内容不再可能。也就是说，有一个issue，希望很快就可以将action添加为可通过router上下文提供的值。

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

修改

显然，因为使用转发按钮也是popstate事件，相关的操作是POP。这使得更难以知道是向前还是向后动画。我可能只是将所有POP视为回来，但这是一项酌情决定。