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

【问题标题】：react-router not waiting for animation before changing routereact-router 在更改路由之前不等待动画
【发布时间】：2015-09-10 05:46:12
【问题描述】：

sample jsfiddle is here 证明了我的问题。

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

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

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

作为参考，我在 master 分支中使用最新的 react-router：1.0b4

【问题讨论】：

jsfiddle导入两个404文件，请修复问题。
@xcatliu 感谢您的指出。 react-router 有一个快速变化的 github repo，它对我的链接进行了 404 处理，并且没有托管这个 beta 版本的 cdn。无论如何，我已经更新了链接到我自己的仓库的 jsfiddle。 Here is the link for the same

标签： reactjs transition react-router

【解决方案1】：

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

基本上，react-router 只关心父容器的动画。但这意味着使用ReactTransitionGroup，我们可以挂钩到现有组件中的componentWillLeave 方法，我们可以在其中让单个孩子进行操作。因此，更改页面会通过钩子自动为子级设置动画。

解决方案中的 setTimeout 可能看起来像一个 hack，但这就是我现在所能做的。

【讨论】：

解决方案 Codepen 不再工作。看起来用于 React Router 的 cdn 有问题。
@KyleShevlin 那时我很愚蠢，将这些 cdn 文件托管在我自己的 github 存储库中，后来我将其删除。现在，React-Router 经历了如此多的混乱，以至于我不再记得哪个版本与那个 Pen 中的代码相关。我也没有热情找到正确的 ReactRouter.js 版本来使 Pen 工作。我很抱歉打破了解决方案，但无意。