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

Question

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

Answer 1

v4仍然是alpha，所以这个答案可能会改变。

在v4 Alpha6中，您可以通过上下文访问history实例。该实例的一个属性是action，它是最后一个导航的操作类型。可能的值是PUSH (前进)、POP (后退)和REPLACE (相同的位置，但可能会将其视为动画的前进位置)。

const { action } = this.context.history

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

v4的最新重构(未实际发布，但可通过GitHub获得)删除了history上下文变量，因此我上面描述的内容不再可行。也就是说，有一个issue，希望很快就会有一个PR来添加action作为一个值，它将通过router上下文提供。

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

编辑

显然，因为forward按钮的使用也是一个popstate事件，所以关联的操作是POP。这使得知道是向前还是向后设置动画变得更加困难。我可能只会把所有的POP都当做back，但这是一个随意的决定。