問題タブ [reactcsstransitiongroup]

ReactCSSTransitionGroup を統合しましたが、アニメーション効果が得られません。次の構造が間違っている場所に関するヒントをいただければ幸いです。

私のcssは次のとおりです。

私のコードは正常に動作しますが、この厄介なエラーが発生しています。どうした？

警告: 失敗した propType: transitionAppearTimeout が ReactCSSTransitionGroup に提供されませんでした: これにより、信頼性の低いアニメーションが発生する可能性があり、React の将来のバージョンではサポートされません。詳細については、 fb.me/react-animation-transition-group-timeoutを参照してください。のレンダリング方法を確認してくださいSocialIcons。

私は ReactCSSTransitionGroup を正常に動作させています (私は思います)。新しくマウントされたコンポーネントはそのすべての栄光にフェードインします。

問題は、置換されているコンポーネントが突然消えることです。これは、最終的にコンポーネントがビューポートに出入りすることを望んでいるため、私にとっては問題です...

エレガントに消える方法を残すコンポーネントに伝える方法がないようです。

何か不足していますか、それとも ReactCSSTransitionGroup は着信コンポーネントをアニメーション化することしかできませんか?

アップデート

以下のコード:

そしてCSS：

アドオンを使用しCSSTransitionGroupて、配列へのアイテムの追加と削除をアニメーション化しています。追加すると、アニメーションは期待どおりに実行されますが、削除すると、アニメーションが始まる前に削除されたアイテムが最後に移動します。私は React にかなり慣れていませんが、React が配列の変更をどのように調整するかについて、内部で何かが起こっていると思いますか?

http://jsfiddle.net/alalonde/0kztn19d

Cordova でモバイルアプリを作っています。react-router@2.0.0+を使用してReactCSSTransitionGroup、「カード デッキ」アニメーションを実装します。循環リンクの可能性のない厳密なルート ツリーがあります。

パフォーマンスを向上させ、以前のルート コンポーネントの状態を保存するために、pop-state または replace-state でのみアンマウントして、それらの履歴全体を保持したいと考えています。

どうやってするの？

ReactCSSTransitionGroup で動作する -leave アニメーションを取得できません。次のコードがあります。

次のスタイルで:

DOM を見ると、-enter と -leave の両方のスタイルがルートの変更に適用されていますが、アニメーション化されているのは -enter スタイルだけです。ルート間ですばやくクリックすると、出発アニメーションが表示されますが、以前のルートの場合です。つまり、A -> B -> A に移動すると、A に戻ったときに、退出アニメーションが短時間ちらつきます。

遷移コンポーネントcomponentWillMountの子ではないキャンバス要素をフェードアウトするために、フックにアクセスしようとしています。<Home>(アニメーション<Home>自体は期待どおりに動作します。)

ホーム.js:

私は何が欠けていますか？ありがとう...

ReactCSSTransitionGroup が私のユースケースに適しているかどうか疑問に思っています。

1 つのルートに検索ボタンがあります。ユーザーがボタンをクリックすると、検索ページに読み込まれている間にボタンが遷移するはずです。読み込まれると、ページの一部の領域が側面からアニメーション化されます。

これを React Router で使用しているため、ページ全体の遷移は単純に見えますが、この方法で特定の要素をアニメーション化するのはより困難に思えます。

ReactCSSTransitionGroup はこれを処理できるはずですか、それとも代替案を検討する必要がありますか?