問題タブ [reactcsstransitiongroup]

関数を使用して、アプリの状態に基づいて必要なコンポーネントを取り出します。ReactCSSTransitionGroupトランジションにアニメーションを追加するために使用してみました。しかし、それはうまくいきません。私のメインレンダリング内で、私はこれを行います:

次に、signupForm 関数内で次のようにします。

私のCSS：

これを機能させる方法はありますか？

最初はReactCSSTransitionGroupでカルーセルを作りたいのですが、簡単なcssトランジションがあります。イベントを追加したいのですが、うまくいきませんでした。だから、私は ReactTransitionGroup を使いたいです。しかし、一度使用すると、いくつかのフックが機能しないために必要になりません。

すべての ReactTransitionGroup ライフサイクル フックが起動するわけではありません。上記の例では、「表示される」「表示された」のみ

ログ。

React にバグがある場合は?

クリック可能なコンテンツ ウィンドウを作成しようとしています。クリックすると、ウィンドウが変わります。画面上のコンテンツをフェードアウトさせ、新しいコンテンツをフェードインさせたいと思います。これまでのところ、フェードインは完了しています (と思います)。フェードアウトが思い通りにいかない。コンポーネントは画面に押し込まれ、その後フェードすることもなく消えます。必要に応じて、ライブ バージョンを GitHub ページにアップロードできます。

この投稿を読んだのですが、React バージョンが問題を引き起こしているのかどうかわかりません。そうじゃないって言いたいの？

とにかく、メインウィンドウのレンダリング機能は次のとおりです。

CSS は次のとおりです。

.example-leave の下にある可視性のコメントを外すと、2 つのパネルのうちの 1 つが非表示になりますが、両方は非表示になりません。

私はこのガイドに従っています。

何か案は？両方のパネルを非表示にするには、可視化を行う必要がありますか? それとも、まったく別のアプローチを試す必要がありますか? ありがとうございました！

render()コンポーネントの関数内に次のコードがあります。

そして、CSSファイルに次のコードがあります：

divブロックを右からスライドインさせたいだけですが、何も起こりません! 間違ったコードが見つかりませんでした。すべて問題ないようです。

Index、BluePage、GreenPageの3つのコンポーネントを持つ単一ページアプリケーションを作成しようとしています

React と React ルーターを使用して切り替えようとしています。レイアウトは次のとおりです。

このビューはスライド ページのようなもので、次の図のように視覚化できます。

これらのトランジションを行うために、現在 ReactCSSTransitionGroup と CSS クラスを使用していますが、ページがアニメーション化する方向が以前に表示されていたページに依存するため、難しくなっています。

たとえば、BluePage がビューに表示されていて、ユーザーが「戻る」ボタンを押した場合、インデックスは右からビューに移動する必要があります。

一方、GreenPage が最初に表示されていた場合、Index は左側から表示されるはずです。

質問

• コンポーネントを適切にアニメーション化できるように、React Router を使用して既存のパスを次のコンポーネントに送信するにはどうすればよいですか?

• ReactCSSTransitionGroup を引き続き使用する必要がありますか、それとも componentWillMount および componentWillUnmount コールバックでアニメーションを処理する必要がありますか?

  • もしそうなら、最初のレンダリング作業の後に CSS クラスをオブジェクトに追加するとどうなりますか?

これらの質問が初心者のように思われる場合は、お詫び申し上げます。私はまだ ReactJS の初心者です。助けてくれてありがとう！

明確化が必要な場合は、お知らせください。

React CSS Transitions を学んでいます。そこで、スライド式のサイドバー ナビゲーションを作成することにしました。サイドバーは右からスライドインします。しかし、私はアニメーションを働かせることができません。何が起こっているのかわかりません。

jsx:

そしてCSS：