問題タブ [react-motion]

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

私はすべての個別のアニメーションを反応モーションで問題なく動作させることができますが、両方を同時に処理する方法について途方に暮れています。

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

私の最初のアイデアは、相対的に配置されたコンテナ内にスライド要素を絶対的に配置することです。ただし、この絶対配置には、絶対配置コンテナー内に含まれるすべてのコンポーネントに関して副作用があります。

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

誰かがこの問題を理解するための良いリソースを教えてくれたり、一般的なアドバイスをくれたりしてくれれば幸いです。私の主な問題は、調査すべきトピックや、この種の問題の解決策を説明するのに適した書籍やオンライン リソースがわからないことです。

個人が ReactJs を使用してアニメーションを作成するのに役立つさまざまなツールがあります。しかし、それぞれに独自の欠点があります。以下は、これまでに調査したツールです。

ReactCSSTransitionGroup : 非常に効果的ですが、CSS と Javascript の間の結合がどのように導入されるかが気に入りません。例えば：

次に、CSS で example-enter、example-leave、example-enter-active、example-leave-active などのクラスを追加する必要があります。これの大ファンではありません。さらに、複雑なシーケンシャル アニメーションを作成する場合、これを管理するのは簡単ではありません。

ReactMotion : もう 1 つの強力なツールです。シーケンシャル アニメーションにも役立ちます。しかし、チェーンに新しい要素を導入することは、他の要素の遅延を変更することを意味するため、複雑なアニメーションのグーアプローチではない遅延を介してそれらを実装します。

ReactTransitionGroupこれまでのところ、私のお気に入りのソリューションです。ライフサイクル フックを公開し、GSAPなどの実証済みのライブラリを使用してアニメーションを管理でき、複雑な部分の管理は非常に簡単です。しかし、それは DOM ノードで機能し、React が render メソッドの外でどんな変更を加えても、それを認識していないことがわかっています。したがって、目的の出力が得られたとしても、React の動作方法に反します。たとえば、このフィドルを見ることができますhttps://jsfiddle.net/tahirahmed/h68s0zod/ (私はこれを作成していません。調査中に偶然見つけました。)

アニメーションは DOM ノードで発生することを理解しています。本番環境では、GSAPやVelocityJs、AnimeJsなどの試行済みのソリューションを使用することは完全に理にかなっています。しかし、これらすべてが React でうまく機能するようにするにはどうすればよいでしょうか?

PS - Velocity-ReactやReact-GSAP-Enhancerなどのソリューションを試しましたが、シーケンシャル アニメーションに関してはうまくいかないようで、約束ではなく遅延に依存する傾向があります。その上、彼らは強制的な更新を行いますが、これは良い方法ではありません。