反应路由器在改变路线之前不等待动画
react-router not waiting for animation before changing route
一个 sample jsfiddle is here 证明了我的问题。
Hello 和 World links 更改路线。 Hello 路由离开时已应用该动画。实际上，过渡设置为当 Hello 页面离开时，它要求子组件 <h1> 在它自己的 componentWillLeave 中进行动画处理，完成后它可以愉快地卸载。我这样做是因为在我的真实应用程序中，当 Hello 页面离开时，它的子组件需要以不同的方式进行动画处理 - 所以它不是整个页面的单一过渡。
要查看问题，请单击 Hello 以加载 Hello 页面。然后点击 World link 进入 World 页面。您会看到 World 页面已加载，即使 Hello 正在运行。
那么如何让 World 等待动画完成呢？
我想确认的另一件事是，我采用的在父组件离开之前使子组件具有动画效果的方法是否正确。
作为参考，我在master分支中使用最新的react-router：1.0b4
好的。在浏览了许多最新和过时的文档之后，我设法解决了这个问题。 Here is the solution
基本上，react-router 只关心 parent 容器的动画。但这意味着使用 ReactTransitionGroup，我们可以挂钩到现有组件中的 componentWillLeave 方法，在那里我们可以对单个 children 进行操作。
因此，更改页面会通过挂钩自动为 children 设置动画。
解决方案中的 setTimeout 可能看起来像 hack，但这就是我目前所能做的。
一个 sample jsfiddle is here 证明了我的问题。
Hello 和 World links 更改路线。 Hello 路由离开时已应用该动画。实际上，过渡设置为当 Hello 页面离开时，它要求子组件 <h1> 在它自己的 componentWillLeave 中进行动画处理，完成后它可以愉快地卸载。我这样做是因为在我的真实应用程序中，当 Hello 页面离开时，它的子组件需要以不同的方式进行动画处理 - 所以它不是整个页面的单一过渡。
要查看问题，请单击 Hello 以加载 Hello 页面。然后点击 World link 进入 World 页面。您会看到 World 页面已加载，即使 Hello 正在运行。
那么如何让 World 等待动画完成呢？
我想确认的另一件事是，我采用的在父组件离开之前使子组件具有动画效果的方法是否正确。
作为参考，我在master分支中使用最新的react-router：1.0b4
好的。在浏览了许多最新和过时的文档之后，我设法解决了这个问题。 Here is the solution
基本上，react-router 只关心 parent 容器的动画。但这意味着使用 ReactTransitionGroup，我们可以挂钩到现有组件中的 componentWillLeave 方法，在那里我们可以对单个 children 进行操作。
因此，更改页面会通过挂钩自动为 children 设置动画。
解决方案中的 setTimeout 可能看起来像 hack，但这就是我目前所能做的。