Router reagujący nie czeka na animację przed zmianą trasy

Question

A sample jsfiddle is here który demonstruje mój problem.

Witaj, Linki i Świat zmieniają trasy. Animacja została zastosowana na ścieżce Hello po jej opuszczeniu. W rzeczywistości przejście jest skonfigurowane w taki sposób, że po opuszczeniu strony Hello prosi komponent potomny <h1> o animowanie w swoim własnym componentWillLeave, kończąc tym, który może odmontować szczęśliwie. Zrobiłem to, ponieważ w mojej prawdziwej aplikacji, po opuszczeniu strony Hello jej elementy potomne są wymagane do animacji na różne sposoby - więc nie jest to jednorazowe przejście dla całej strony.

Aby zobaczyć problem, kliknij Witaj, aby załadować stronę Hello. Następnie kliknij link Świat dla strony World. Zobaczysz, że strona World jest ładowana nawet podczas animowania Hello.

Jak zatem sprawić, aby World czekać na zakończenie animacji? Inną rzeczą, którą chcę potwierdzić, jest to, czy podejście, które zastosowałem, aby uczynić element potomny animacją przed opuszczeniem komponentu nadrzędnego, jest poprawne, czy też nie.

Dla odniesienia używam najnowszej reagować-routera w głównego oddziału: 1.0b4

Answer 1

OK. Po przejrzeniu wielu najnowszych i przestarzałych dokumentów udało mi się to rozwiązać. Here is the solution

Zasadniczo router reagowania dotyczy tylko animacji kontenera nadrzędnego. Ale to oznacza, że ​​używając ReactTransitionGroup, możemy podłączyć się do metody componentWillLeave w komponencie wychodzącym, gdzie możemy manipulować poszczególnymi dziećmi. W ten sposób zmiana strony automatycznie animowałaby dzieci przez hak.

Rozwiązanie setTimeout może wydawać się hakerem, ale to wszystko, co udało mi się zrobić na razie.