react-router在更改路由之前不等待动画

Question

表明我的问题的sample jsfiddle is here。

Hello 和 World 链接会更改路由。动画在离开时已应用于Hello路由。实际上，设置转换时，当Hello页面离开时，它会要求子组件<h1>在其自己的componentWillLeave中进行动画处理，从而完成可以快速卸载的页面。我这样做是因为在我的真实应用程序中，当Hello页面离开时，其子组件需要以不同的方式进行动画处理 - 因此它不是整页的单个转换。

要查看问题，请点击 Hello 以加载Hello页面。然后点击World页面的 World 链接。即使World是动画，您也会看到Hello页面已加载。

那么如何使World等待动画完成？ 我想要确认的另一件事是，在父组件离开之前用于使子组件动画化的方法是否正确。

供参考，我在主分支中使用最新的 react-router ：1.0b4

Answer 1

行。在浏览了许多最新的和过时的文档后，我设法解决了这个问题。 Here is the solution

基本上，react-router只关注父容器的动画。但这意味着使用ReactTransitionGroup，我们可以在退出组件中挂钩componentWillLeave方法，在那里我们可以让个别孩子操纵。 因此，更改页面会自动通过钩子动画孩子。

解决方案中的setTimeout可能看起来像是黑客攻击，但这就是我现在所做的一切。