5

私は非常に簡単だと思ったことを達成する方法を見つけようとして頭を悩ませてきました（私は知っています...）

目標は、トリガー ボタンまたは w/e を使用して何らかの HOC でアニメーション化できる、非常に最小限で再利用可能なモーダル コンポーネントです。

私はcreatePortalを使用して作成しています。目標は、ポータルの出入り時にいくつかの簡単なアニメーションを追加することです。

私は GSAP を使用してこれを機能させましたが、理想的には、別のアニメーション ライブラリを取り込む必要がないように、これを SC と一緒に使用したいと考えています。

私の人生では、これをSCで機能させることができず、誰かが私を正しい方向に向けることができれば幸いです.

ここでサンドボックスを作成しました: https://codesandbox.io/s/r44w9m4o5p GSAP を使用してアニメーションを実行します。これは少しハックですが、目的に沿った適切な方向です。

また、 https://github.com/react-tools/react-moveのようなものよりも react-transition-group を使用する利点はありますか?

4

1 に答える 1

4

CSSTransitionの代わりにコンポーネントを使用できますTransition。指定されたアニメーションのタイミングを使用して、CSSTransition適切なクラス名を切り替えるだけです。したがって、CSS3 プロパティを使用してすべてのトランジションを定義できます。.*-enter.*-enter-active.*-exit.*-exit-activestyled-components

私のフォークを見てください: https://codesandbox.io/s/zz95v5103

Modalトランジション スタイルで拡張しました。スタイルを拡張するには、コンポーネントを拡張するためのプロパティが必要なclassNameので、そのプロパティをコンポーネントに追加しましたModal。

于 2019-02-14T08:07:01.553 に答える