15
React-単一コンポーネントのマウントとアンマウントのアニメーション
この単純なことは簡単に達成できるはずですが、それがいかに複雑であるかについて、私は自分の髪を引き出しています。 私がやりたいのは、Reactコンポーネントのマウントとマウント解除をアニメーション化することだけです。これが私がこれまでに試したことと、それぞれの解決策が機能しない理由です： ReactCSSTransitionGroup -私はCSSクラスをまったく使用していません。すべてJSスタイルなので、これは機能しません。 ReactTransitionGroup-この下位レベルのAPIは優れていますが、アニメーションが完了したときにコールバックを使用する必要があるため、CSSトランジションを使用するだけでは機能しません。常にアニメーションライブラリがあり、次のポイントにつながります。 GreenSock-ライセンスは、ビジネスで使用するIMOには制限が多すぎます。 React Motion-これは素晴らしいようですが、 TransitionMotion私が必要とするものに対して非常に混乱し、過度に複雑です。 もちろん、マテリアルUIと同じように、要素はレンダリングされますが非表示のまま（left: -10000px）ですが、そのルートには行きたくありません。私はそれをハックだと考え、コンポーネントをアンマウントして、コンポーネントがクリーンアップされ、DOMが乱雑にならないようにします。 簡単なものが欲しいに実装。マウント時に、一連のスタイルをアニメーション化します。アンマウント時に、同じ（または別の）スタイルのセットをアニメーション化します。できました。また、複数のプラットフォームで高いパフォーマンスを発揮する必要があります。 ここでレンガの壁にぶつかった。何か足りないことがあり、これを行う簡単な方法がある場合は、お知らせください。