問題タブ [react-motion]

リストがあり、react-draggable を使用して、そのリストから要素 (div) をドラッグできるようになりました。React-draggable は元の要素をドラッグ可能にします (理にかなっています) が、元の要素のコピー (クローン) をドラッグし、元の要素をそのままにしておく必要があります。したがって、要素を含むエンティティリストがあり、各要素には、元のシフトを複製することを望んでいる親要素リストを呼び出すイベントがあり、元の要素をドラッグ可能な要素でラップしてドラッグ可能にします。ドラッグ可能/作成したら、画面上の別の要素にアタッチし、初期位置をマウスカーソルのある中央に配置します。私がやりたい最後のことは、要素が「間違った」場所にドロップされた場合、元の位置に戻るようにアニメーション化することです(私が推測する反応モーション)。

「モーダルウィンドウ」でReactjs + React-motionプロジェクトに取り組んでいます（たとえば）可能であれば、コンポーネントを動的にマウントまたはロードしたいですか？

これまでの私の解決策：方法が見つからなかったので、コンポーネントを配置して非表示にし、状態の変化時にクラスまたはスタイルを切り替えて、非表示のコンポーネントを明らかにし、「モーダルウィンドウ」の遷移が完了します。

以下のコードを共有すると、私がやろうとしていることを理解しやすくなります。イベント ハンドラーはなく、ほとんどのコードが削除されましたが、onRest(アニメーションが終了したときのイベント コールバックが公開されています) とレンダリング fn.

React-Motion でアンマウント アニメーションを追加したいのですが、それに関する情報が見つかりません。これは私のコードです:

アニメーションはマウント時に完全に機能しますが、アンマウントすると消えます。これを修正する方法はありますか？

ヘッダータグでラップされた小さな文字列を表示するだけの動作するReactコンポーネントがあります（持っていました）。正しく表示されていたので、インポート/エクスポートが正しく設定されているとほぼ確信しています。メソッドに<Spring />コンポーネントを追加しようとすると、次のように表示されます。render()

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Animation.

<Spring>以前はすべてが正しく機能していたのに、コンポーネントが原因でこの問題が発生したのはなぜですか? 以下の私のコード：

React + React-Router で Web サイトを作成しています。ビューの切り替えをアニメーション化するために react-router-transition を使用し、小さなコンポーネントをアニメーション化するために React-motion-ui-pack を使用しました。

問題は、デスクトップ PC でテストしたときのアニメーションは問題ありませんが、モバイル ブラウザーでテストすると、かなりの遅延が発生することです。

私が知っているように、react-router-transition と react-motion-ui-pack は両方とも React-Motion を使用しています。CSS3 Transforms でアニメーションを追加するとうまくいかないので、CSS プロパティだけを直接使用しました (translate Transforms の代わりに top/left を使用するなど)。

これは私のコードの一部です:

ご覧のとおり、不透明度の onEnter と onLeave を変更しました。しかし、これにより、モバイル デバイスのパフォーマンスが大幅に低下します。

この問題を解決する方法はありますか?

全て：

私は反応モーションにかなり慣れていないので、いつモーションを次のように使用するのだろうかと思います。

次の値を補間するために使用する初期値をどのように知ることができますか? また、配列を補間するにはどうすればよいですか (目的は、その配列を D3.js で使用して SVG パスを生成することです)、次のようにします。

ありがとう