React JSのスライドトランジションと絶対配置

Question

大きなコンテナコンポーネントが一方の側からスライドし、他方のスライドが他方の側にスライドするようなビュー遷移を容易にしようとしています。

リアクションモーションで問題なく動作するように個別のアニメーションをすべて取得することはできますが、同時に両方を同時に処理する方法はありません。

本質的に、両方のコンポーネントがビューポートに同時に存在する点があります。私は、CSSレイアウトの知識が問題を適切に処理するには不十分だと感じています。

私の最初のアイデアは、スライディング要素を相対的に配置されたコンテナの内部に絶対配置することです。しかしながら、この絶対配置は、絶対配置された容器の内部に含まれる全ての構成要素に関して副作用を有する。

これは解決された問題です（iOSビューは常に前後にスライドし、ビューポートにポップアップするとレイアウトの動作を保持します）。

この問題を理解するための優れたリソースを誰かが指摘してくれたり、一般的なアドバイスをいただければ幸いです。私の主な問題は、どのようなトピックを研究するのか、このタイプの問題に対する解決策を説明するのにどの書籍/オンラインリソースが良いのか分かりません。

Answer 1

私はあなたが言及した状況を処理するように聞こえるreact-transitionという素晴らしいパッケージを使用しました。ここでそれをチェックしてください：https://www.npmjs.com/package/react-transitionsここでデモを見ることができます：https://szchenghuang.github.io/react-transitions/