問題タブ [reactcsstransitiongroup]

ReactCssTransitionsGroup 内でレンダリングされるすべての子にずらし効果を追加したいのですが、その方法がわかりません。この質問を見ましたが、react transitions グループを使用して試してみたいと思います。それが不可能な場合は、上記のリンクされた質問と同様のことを行います。

私の遷移コンポーネントは非常に単純です:

react-routerで遷移するときにアニメーションをコンポーネントに適用したいと思います。これは初期ロード後にのみ実行できますが、初期マウントでもアニメーションを表示したい (ページの更新)。

これは私が試したものです。注transitionAppear: trueは何もしませんでした：

React の TransitionGroup に奇妙な問題があります。初めてどういうわけか、状態値に基づいてスタックして更新されないグループとコンポーネントを作成することができました。

常に TransitionGroup を持つ 1 つのコンポーネント (A) を用意します。状態が変化すると、それ自体が再レンダリングされます。TransitionGroup では、他のコンポーネント (B) を追加/削除します (はい、一意のキーがあります)。コンポーネントBには、休暇中にアニメーションを実行したくないため、コールバックを呼び出すだけの関数componentWillLeaveがあります。そして、これらのいまいましい B コンポーネントは、私のコンポーネント A にとどまります! しかし、componentWillLeave 関数で setTimeout() を 10ms 実行すると、適切に切り離されます。なぜこれが起こったのか、同じ問題があったのか、誰にも分かりますか?

ありがとう、

T

reactjs を使用してページ遷移アニメーション (スライド/スワイプ) を実装しようとしています。ReactCSSTransitionGroupを使用しましたが、ブラウザでは正常に動作しますが、phonegap を使用してビルドし、Android デバイスで試してみると動作しません。私はそれがこのようなものであることを望みます。移行にはReactJsとrackt/reactrouterを使用しています。

開発環境の詳細は以下のとおりです。 オペレーティング システム : Windows 7 PhoneGap バージョン : 4.2.0-0.26.0 ターゲット プラットフォーム : Android

コード スニペットは次のとおりです。

索引.html

ここにMain.jsがあります

ページ アニメーションを変更するこの素晴らしい例を取得しましたが、グローバル ページ変更アニメーションと状態変更アニメーションを 4 つの状態のフォームで管理したいと考えています。

例があります。 https://github.com/rackt/react-router/tree/master/examples/animations

子小道具が nextProps 引数に同じ量のルート小道具を持っていない場合、更新をブロックしようとしています。うまくいきません。

誰か助けてくれませんか？

ありがとうございました

メイン URL "/" を取得しました。"/registration" に変更すると、遷移が必要になります。「/registration」で「/registration/contact-infos」に移動すると、登録フォームの状態間で別の遷移を行う必要があります。

React CSSTransitionGroup でページ遷移を追加しているときに問題が発生しました。offsetHeight問題は、遷移したコンポーネントがまだアニメーション化されている間にアクセスすると、アニメーションが期待どおりに動作しなくなることです。

Codepen でこの例を確認してください: http://codepen.io/anon/pen/pgyBvO。

ページ遷移は問題なく機能します。12 行目のコメントconsole.log(this.refs.container.offsetHeight)を外して、もう一度試してください。右ページのエンター アニメーションがスキップされます。

React-router と ReactTransitionGroup を使用してページ遷移をアニメーション化しようとしています。

各ページには異なるトランジションが必要です。

このように、コンポーネントはそのまま実行されcomponentWillAppearます。Leaveトランジションも設定したいです。

これらを正しく処理する最善の方法は何ですか?

これは、今のところ ReactTransitionGroup を処理しようとする方法です:

そして、ログインコンポーネントの表示、入力、終了のアニメーションを作成しようとしています。

このセットアップは、私の登録ページとフォームの状態と同じであり、登録では機能します。

ありがとうございました！