React路由器 - 如何實現離開頁面動畫？

Question

使用ReactCSSTransitionGroup進行動畫效果很好，直到我收到React Router。

更改狀態是即時的，在進入下一個狀態之前沒有時間爲動畫創建動畫。

當進入一個新的狀態時，正常的ReactCSSTransitionGroup語法可以工作，因爲新組件正在被裝載。

我想要做的是超時狀態只是500ms的變化，卸載組件，引發ReactCSSTransitionGroup的正常過渡..然後允許狀態變換繼續到下一個狀態...

的唯一的辦法，我可以防止狀態的變化是routerWillLeave - 但我似乎只能返回true或false ...不延遲...然後返回true。我能回覆某種承諾嗎？

下面是我使用的代碼：

Simple react Login Form code

謝謝！

Answer 1

你不能用routerWillLeave做到這一點;類似於原生的離開鉤子，您只能嘗試同步阻止轉換。

React路徑回購包括一個如何處理動畫的工作示例，該動畫將先前呈現的組件保留在其最後狀態：https://github.com/rackt/react-router/tree/v1.0.0-rc4/examples/animations。你需要遵循這種模式來完成你想要的。