問題タブ [react-transition-group]

私は現在、ルートの変更をアニメーション化するためreact-transition-groupに と組み合わせて使用​​していますが、これは正常に機能しています。react-router-dom

私が抱えている唯一の問題は、ルートを切り替えて、componentDidMountライフサイクルフックでデータを送信またはフェッチする必要があるときに、2 回発生することです。これが原因であると確信してreact-transition-groupいますが、この問題に対する明らかな解決策があるかどうか疑問に思っていました.

これは、データベースにエンティティを 2 回挿入していたため、意図した動作とはかけ離れていることがわかりました。

ログインによる遷移例componentDidMount

I'm using React Router v4 and react-transition-group v2 to test the page sliding animation.

And the CSS:

The animation is as bellow:

As you see, the animation that index page slide to the detail page is all right(right to left). But when I click the Back icon, I hope index page comes out from left to right.

I know if I change the CSS as bellow, the page will come out from left to right:

But how combine the two animations together? Generally speaking, whenever user clicks the back icon, the animation should be from left to right.

Update: 2017.08.31

Thanks for @MatijaG, using the path depth is really an awesome idea. I followed it and got a new problem.

And updated CSS:

The animation:

From '/' to '/games' is ok, and from '/games' back to '/' is still ok(type 1: route A -> route B, only 2 routes). But if firstly from '/' to '/games', and then from '/games' to '/games/lol', the second phase lose the animation(type 2: route A -> route B -> route C, 3 or more routes). We also see that from '/games/lol' back to '/games' and then back to '/', the slide animation is not same as type 1.

Anyone has any idea about this problem?

反応でシンプルなアプリを構築しています。fillいいねボタンをクリックすると、svgの色を変更しようとしています。私はいろいろ調べましたが、多くの開発者が React Transition Group を方法として使用していますが、この場合の仕組みを理解するのに苦労しています。

いいねボタンをクリックするたびに数字が増え、そのときにsvg背景の色を変更したいと思います。私はこの方法を試しましたが、うまくいきません。ここで何が間違っていますか？ここにコードがあります。

コンポーネントとしてのsvgのように。

CSS 注: アニメーションが機能するかどうかを確認するためのテストとして、不透明度を選択しました。

また、他のパフォーマンス フレンドリーな反応アニメーション ツールについての提案も受け付けています。