問題タブ [react-motion]

反応モーション fromx: -20を使用してブレッドクラムをアニメーション化しようとしていx: 0ます。

Folder > SubFolder > Child

問題は、ブレッドクラムが最初のレンダリングで完全にアニメーション化されることです。その後propsまたはstateが変更されても、アニメーションは更新されません。これは既知のバグのようです。

私の質問は、状態/小道具の変更時にアニメーションを「再開」するにはどうすればよいですか?

この質問は、この投稿に関連しています。

React Router v4 React Motion を使用したトランジションの一致

...しかし、私はそれが独自の質問に値すると思いました.

ここから取った例を使用する方法を理解しようとして<MatchWithFade>います:

https://react-router.now.sh/animated-transitions

私が見ている問題は、2 つのタブがあり、それらの間をフェードしたい場合、2 つのタブのうちの 1 つにのみフェード効果が見られ、どちら<MatchWithFade>がコードに最初に表示されるかによって異なります。

関連するコードは次のとおりです。

この例では/one、(React Router<Link>コンポーネントを使用して) に移動するとフェードが発生しますが、 に移動して/twoもフェードは発生しません。次に、最初にリストすると、<MatchWithFade pattern='/two' ... />へのフェード トランジションが表示されます/twoが、 ではありません/one。

使うだけ<Match>で問題なく動作するので、構成の根本的な問題ではないと思い<BrowserRouter>ます。

私は何かばかげたことをしているだけだと思っていますが、私の人生では、何を理解することはできません. 任意のガイダンスをいただければ幸いです。

アップデート

React Router を使用して jsbin を作成する方法がわかりませんでした (インポート ステートメントを介して RR しか使用したことがないため、メソッドとオブジェクトを参照する方法がわかりませんでした)。次善の策は次のとおりです。これは、この問題を示す完全な例です。

MatchWithFadeこのと React Router のドキュメントから取ったものとの間には、ごくわずかな違いしかありません。最大の違いは、参照を引き出したことですzIndexが、動作には影響しませんでした。

関連する場合は、このプロジェクトを使用して開始しcreate-react-app、React Router バージョンを使用して4.0.0-alpha.6います。

この質問はこれのフォローアップです：

React Router v4 と MatchWithFade の問題

MatchWithFadeReact Router v4 の使用について、別の (ばかげている可能性がある) 質問があります。私がやりたいのは、ネストされたルートを持つことです。そのため、トップレベルのコンポーネントには次のようなものがあります。

<MatchWithFade pattern='/one' component={One} />

...そして、Oneこれがあるかもしれません:

<Match pattern='/one/one' Component={OneOne} />

これは私には珍しいパターンではありません (そうかもしれませんが)。いずれにせよ、私が観察している動作は、上記の例を使用すると、ロードOneOneするとマウントされ、componentWillUnmountすぐに呼び出されるということです。推測するとTransitionMotion、 の (おそらく非表示の) インスタンスを追跡しOneOne、移行が完了すると、その非表示のコンポーネントがアンマウントされます。基本的な UI に関する限り、OneOneレンダリングされます。ただし、componentWillUnmount何らかのクリーンアップ (たとえば、Redux から何かを削除するなど) を行うと、もちろんそのアクションが実行され、関連付けられているデータはすべてOneOne吹き飛ばされます。

問題を示す完全な例を次に示します。

これを読み込んでコンソールを開く場合は、OneとTwoリンクを切り替えます。UI でクロス フェードが発生し、One から Two への移行が完了すると、コンソールに「ONE UNMOUNTING」と表示されます。そうです。

Two Oneここで、 と の間をクリックしますTwo Two。この場合、Two Oneをクリックすると、すぐにコンソールに「TwoTwo がアンマウントされます」と表示されますが、これは問題ありません。ただし、 をクリックTwo Twoすると、約 1 秒後に「TwoTwo がアンマウントされます」と表示されます。これは、親MatchWithFadeが実行するのにかかる時間です。

だから私はここで何が起こっているのか分かりません。私のコードは壊れたのですか？RRv4 がサポートできないことをしていますか? バグを発見しましたか?

ヘルプ/ガイダンスをいただければ幸いです。

アプリで:

FramesCollection:

コードはエラーなしでコンパイルされますが、ブラウザーを追加すると、2 つのエラーが表示されます。

警告: 失敗したプロップ タイプ:に 指定されたchildrenタイプのプロップが無効であると予想されます。in Motion (FramesCollection で作成) in FramesCollection (Connect(FramesCollection) で作成) in Connect(FramesCollection) (App で作成) in div (App で作成) in App (Connect(App) で作成) in Connect(App) inプロバイダーの divobjectMotionfunction

と

キャッチされていない TypeError: this.props.children は、Object.render (Motion.js:235) の関数ではありません。 ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) で ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) で ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) で Object.mountComponent (ReactReconciler.js:46) で ReactDOMComponent.mountChildren (ReactMultiChild. js:238) ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697) で

私は何を間違っていますか？