問題タブ [react-motion]

これは、github の demo0-simple-transition のコードです。リンク 移動する div 要素にコンテンツを追加するにはどうすればよいですか。これのバリエーションを使用してフライ アウト メニューを実行することを望んでいましたが、内部コンテンツを取得する方法がわかりません。ありがとう

React Motion v4で「回転」と「スケーリング」を理解するのに苦労しており、オンラインでそれを行う方法について多くを見つけることができないようです. 以下のような単純な状態変更とともに、単純な css プロパティを簡単に変更できます。

ただし、たとえば「変換：回転（90度） 」などのより複雑なcssプロパティを使用して上記を行うにはどうすればよいですか？

最後に、ロールオーバーとロールアウトで発生するアニメーションなど、より複雑な状態ロジックが必要な場合や、さまざまな状態が true または false の場合、どこでそれを行うのが最善ですか? React Motion を使用する前は、状態といくつかの条件に基づいて要素のインライン スタイルを更新していましたが、React Motion を使用するだけでこれを行う方法がよくわかりません。あなたの考えは大歓迎です！:D

t xx

この単純なことは簡単に達成できるはずですが、私はそれがどれほど複雑であるかについて頭を悩ませています。

私がやりたいのは、React コンポーネントのマウントとアンマウントをアニメーション化することだけです。これまでに試したことと、各ソリューションが機能しない理由は次のとおりです。

1. ReactCSSTransitionGroup- CSS クラスはまったく使用していません。すべて JS スタイルなので、これは機能しません。
2. ReactTransitionGroup- この下位レベルの API は優れていますが、アニメーションの完了時にコールバックを使用する必要があるため、CSS トランジションを使用するだけでは機能しません。常にアニメーション ライブラリがあり、次のポイントにつながります。
3. GreenSock - ライセンスは、IMO のビジネス利用には制限が強すぎます。
4. React Motion - これは素晴らしいようですが、TransitionMotion非常に紛らわしく、必要なものに対して非常に複雑です。
5. もちろん、マテリアル UI のように、要素がレンダリングされても非表示のまま ( left: -10000px) のトリックを実行することはできますが、そのルートには行きたくありません。私はそれをハックだと考えており、コンポーネントをアンマウントしてクリーンアップし、DOM を乱雑にしないようにしたいと考えています。

簡単に実装できるものが欲しい。マウント時に、一連のスタイルをアニメーション化します。アンマウント時に、同じ (または別の) スタイルのセットをアニメーション化します。終わり。また、複数のプラットフォームで高性能でなければなりません。

ここで壁にぶち当たりました。何か不足していて、これを行う簡単な方法がある場合は、お知らせください。

全て：

私はReact-Motionを初めて使用します.githubのほとんどの例は、単一の数値を補間する方法に関するものです.データオブジェクトの配列をそれに適用したいのですが、どうすればこれを実装できますか?

私の使用例は、svg パスの D3 からの遷移と同じ効果を実装することです

私は次のようなことを考えています：

ありがとう

this.props.data反応モーション TransitionMotion とスプリングを使用してマウント/アンマウント アニメーションで React で一連のデータ ( ) をレンダリングしようとしています。このデータは、検索/フィルター機能を介して別のコンポーネントから更新されています。API リファレンスに従うように最善を尽くしましたが、コンソール デバッグで次の警告が表示されます。Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

この警告にもかかわらず、データは引き続きレンダリングされます。マウント/アンマウントのトランジションはなく、最大 10 個のアイテムをレンダリングしているだけでも、の内容を変更すると、タブ全体が地獄のように遅れますthis.props.data。

私のコードで何が起こっているのか誰か知っていますか? デバッグに関するヘルプは大歓迎です。

私は RR4 と RM が大好きです。React Router V4 ( https://github.com/ReactTraining/react-router/tree/v4/website/examples ) の優れた例は既にありますが、どのように使用できるかを理解するのに苦労しています。新しい V4 API は、React Motion を使用してルーター内の異なるマッチ間を遷移し、「ページ」間でフェードインおよびフェードアウトします。

Transition の例が MatchWithFade でどのように機能するかを理解しようとしましたが、これを取得して、ページ構造を表す複数の一致に適用する方法がわかりません。

例として: Router に 2 つのルートが設定されている場合、TransitionMotion を使用して反応モーションでマウントとアンマウントを処理するにはどうすればよいですか?

どんな助けでも大歓迎です。

React Motion を使用してスライド メニューを再作成しようとしています。ここで私の非動作例を見ることができます: http://codepen.io/kirupa/pen/BQVzvQ (青い円をクリックしてメニューを表示または非表示にします)

これが私の問題です。黄色の領域内の任意の場所をクリックすると、メニューが非表示になります。ReactMotion 以外の動作例はこちら: https://www.kirupa.com/html5/examples/slidingmenu.htm

React に戻ります。なんらかの理由で、モーション タグ内のメニュー要素にアタッチされたイベント ハンドラーが無視されます。関連するスニペットは次のようになります。

に注意してonMouseDown={this.handleMouseDown}ください。これは、クリックするとメニューを表示 (および非表示) する青い円に関連付けられた同じイベントであり、正常に動作します。

ここで何が間違っていますか？これは明らかに間違ったことをしているように見えますが、それが何であるかはよくわかりません。これが役立つ場合、React DevTools でコンポーネントを調べると、イベント ハンドラーがアタッチされていません。それは何らかの理由で本当に奇妙に思えます。それはスコーピングの問題でしょうか？

ありがとう、

キルパ