React Router - 如何实现离页动画？

Question

使用ReactCSSTransitionGroup进行动画效果很好，直到我参与了React Router。

改变状态是即时的，在进入下一个状态之前没有时间动画出来。

当进入新状态时，正常的ReactCSSTransitionGroup语法有效，因为新的组件正在安装。

我想要做的是将状态更改超过500毫秒，卸载组件，触发ReactCSSTransitionGroup的正常转换......然后允许状态更改进入下一个状态......

我可以阻止状态变化的唯一方法是routerWillLeave - 但我似乎只能返回真或假...而不是延迟......然后返回true。我可以回复某种承诺吗？

以下是我使用的代码：

Simple react Login Form code

谢谢！

Answer 1

您无法使用routerWillLeave执行此操作;类似于本机假挂钩，您只能尝试同步阻止转换。

React Router repo包含一个如何处理动画的工作示例，该动画将先前渲染的组件保持在其最后状态：https://github.com/rackt/react-router/tree/v1.0.0-rc4/examples/animations。你需要按照这种模式来完成你想要的。