問題タブ [reactcsstransitiongroup]

私のプロジェクトでは ClojureScript を使用しています。最初は、特に Stepper コンポーネントに Reagent と Material ui を使用しました。私の問題は、react-with-addons をインポートする必要がある CssTransitionGroups を使用したいということです。問題は、2 つの「ライブラリ」が連携していないことです。これはproject.cljです

したがって、CssTransitionGroups を使用するための最初のステップは、定義することです

ただし、Material.ui が含まれていないと機能しません。どういうわけか、material.ui が React.addons を上書きしています。ブラウザーのコンソールで React.addons と入力しようとすると、material.ui も必要な場合は undefined になります。別々に、両方とも機能します。

そのため、ホームページの読み込み時に ReactCSSTransitionGroup でトランジションを表示しようとしています。ジャンボトロンの下にアイテムの一覧を表示することです。この商品は Redux ストアからのものです。これらは、Redux Store を認識する home_index.js というコンテナー コンポーネントから渡されます。コンポーネント自体の 'poll-list.js' には、遷移する項目である poll-links が含まれています。それ (およびその子) は DUMB コンポーネントです。つまり、状態がなく、redux ストアを認識していません。(これらのコンポーネントは ReactCSSTransitionGroup を使用できますか?)

いずれにせよ、私の人生では、このフェード イン トランジションを機能させることはできません。私は何か間違ったことをしているに違いないことを知っています...しかし、それを理解することはできません.

}

そして、これがCSSです（私はLeaveを行っていないことに注意してください。Appearをtrueに設定しました。これをホームページの初期ロード時に発生させたいだけです）

また、この要素のこのレベルに ReactCSSTransitionGroup を配置すると、フレックスボックスがすべて奇妙になります。コンポーネントは 4 列 (または画面の幅に基づいて多数) ではなく、中央の 1 つの列に配置されています...

遷移グループ HOC はどこに置くのですか?

React Animations (React CSS Transition Group)の公式ドキュメントを読んできましたが、特に CSS 内でトランジションを設定している場合に、タイムアウト値が何に使用されるのかが少しわかりません。値は遅延、アニメーションの持続時間、またはそのクラスが適用されてから削除されるまでの時間ですか? また、CSS で設定されたトランジションの持続時間とどのように関連していますか?

たとえば、コンポーネントの出入り時に単純なフェードイン/アウトを行う場合は、CSS 内で不透明度とトランジションの持続時間も設定します。コンポーネントは、この値で渡されたタイミングまたは CSS 内で設定された期間に基づいてアニメーション化されますか?

公式ドキュメントで提供されている例を次に示します。

私のReactコンポーネント

私の .css ファイル

ありがとう！

React.js 以下の React.js コードに問題があります。「React-router.Link」を使ってページ遷移前のアニメーションを設定しようとしています。および ReactCSSTransitionGroup。

バージョンの反応: '15.2.1' 反応-アドオン-css-遷移グループ: '15.2' 反応ルーター: '2.6.0'

ライフサイクル イベントを取得したいので、CSS ではなく JS を使用できます。正しいやり方をご存知でしたら教えてください。ありがとうございました。

ex.) componentWillLeave など...

PS私はこのコードを試しましたが、componentWillLeaveは起動しません。

次にテキスト入力に通知を表示して、テキストが保存されたことをユーザーに通知し、その通知テキストをフェードアウトさせようとしています。

基本的に、対応するテキスト入力が送信されたときに、このアクションを複製しようとしています。

$(this).fadeOut().next().fadeIn();

フェードインしてからフェードアウトする方法は考えられません。

私も Redux を使用しており、それを使用したいと考えていますが、必須ではありません。アドバイスをいただければ幸いです。

親コンポーネントに次のコードがあります-デフォルトではModule1が表示され、クリックするとmodule2に置き換えられます-このロジックを配置して、module2がトグルするときに基本的なフェードイン/アウトを追加しようとしますが、トランジションは行います起こりません..ここで何が欠けていますか??

React-Virtualized はすぐに使用できるアニメーションをサポートしていないようですが、ReactCSSTransitionGroupトランジションを実装するために使用することは可能ですか (そして合理的ですか?)。

私の場合、仮想化されたリストの要素でアニメーションの削除 (不透明度のフェードや高さの縮小など) トランジションを実行したいと考えています。