reactjs - Reactjsでシーケンシャルアニメーションを構築するための最良のアプローチは何ですか?

Question

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

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

    <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={700}
        transitionLeaveTimeout={700}
    ></ReactCSSTransitionGroup>

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