react-router在更改路由之前沒有等待動畫

A sample jsfiddle is here這證明了我的問題。react-router在更改路由之前沒有等待動畫

你好和世界鏈接改變路線。離開時，動畫已應用於Hello路由。實際上，轉換設置爲當Hello頁面離開時，它要求其子組件<h1>在其自己的componentWillLeave中進行動畫，完成它可以愉快地卸載。我這樣做是因爲在我的真實應用程序中，當Hello頁面離開時，其子組件需要以不同的方式進行動畫處理 - 因此它不是整個頁面的單個轉換。

要查看該問題，請點擊您好加載Hello頁面。然後點擊世界鏈接爲World頁面。即使在Hello正在動畫時，您將看到World頁面已加載。

那麼如何讓World等待動畫完成呢？我想確認的另一件事是，如果我在父組件離開之前用來製作子組件的方法是正確的。

僅供參考，我使用的是最新的反應路由器在主分支：1.0b4

來源

2015-09-10 Jayesh Bhoot

jsfiddle導入了兩個404文件，請解決這個問題。 – xcatliu

@xcatliu感謝您指出。 react-router有一個快速變化的github repo，它是404的我的鏈接，並且沒有cdn託管這個測試版本。無論如何，我已經更新了與我自己的回購鏈接相關的jsfiddle。 [這裏是相同的鏈接]（https://jsfiddle.net/69z2wepo/15832/） –

確定。在涉及了大量最新和過時的文檔之後，我設法解決了這個問題。 Here is the solution

基本上，react-router只關心父容器的動畫。但是這意味着使用ReactTransitionGroup，我們可以在退出組件中掛入componentWillLeave方法，在那裏我們可以讓各個孩子操作。因此，改變一個頁面會自動地通過鉤子爲孩子設置動畫。

解決方案中的setTimeout可能看起來像一個黑客，但這就是我現在所能做的。

來源

2015-09-15 10:23:43

解決方案Codepen不再有效。看起來好像用於React Router的cdn有問題。 –

react-router在更改路由之前沒有等待動畫

回答

相關問題