問題タブ [reactcsstransitiongroup]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

206 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
6 に答える
4277 参照

unit-testing - テストで React の CSSTransitionGroup を無効にする

CSSTransitionGroup要素がDOMに表示されるとき、またはDOMを離れるときに要素をアニメーション化するために使用しています。それはうまくいきます。

今 - このコンポーネントを単体テストしたいと思います。一時的な DOM ノードを作成して にアタッチし<body>、コンポーネントをそこにレンダリングしてから、いくつかのアクションを実行します。その結果、子 DOM ノードが消えることが予想されます。

問題: アニメーション クラスが適用され、コンポーネントは CSS アニメーションが終了するまで DOM に保持されます。これは、その要素がなくなったことをアサートする前に、テストも数百ミリ秒待機する必要があることを意味します。私はそれを行うことはできません.単体テストであるため、テストを高速にしたいと考えています。

質問: コンポーネントにオプションを追加せずに CSS トランジションを無効にする方法はありますか?

私が試したこと： ユニットテスト自体はうまくいきます。を使用しないようにするパラメーターをコンポーネントに渡すことで、アニメーションを取り除くことができますCSSTransitionGroup。だから - 最悪のシナリオ - 私はそうします。しかし、私はより良い解決策を探しています。

「-enter」/「-enter-active」/「-leave」/「-leave-active」クラスが問題の要素に存在すると断言することもできます。これらのクラスが適用されるバグを想像することができたので、それは少しハックに思えますが、要素は DOM に残ります。私はこのアプローチに頼らないことを望みます。

0 投票する
1 に答える
183 参照

reactjs - React & React-Router & ReactCSSTransitionGroup

3 つの状態を持つシンプルなアプリを作成し、ReactCSSTransitiouGroup で React のルーターを使用しています。ReactCSSTransitionGroup のデフォルトの動作は単純です。

  1. クリックしてリンクを追加/追加した後、新しい子を追加します
  2. 新しい子は「app-enter」および「app-enter-active」クラスを取得します
  3. 古い子は「app-leave」および「app-leave-active」クラスを取得します
  4. タイムアウト後、古い子を削除します

私がやろうとしているのは、この動作を変更して、次のように動作できるようにすることです。

  1. クリックしてリンクした後も、同じ状態のままです。古い子クラス「app-leave」および「app-leave-active」クラスに追加するだけです。
  2. 脱退タイムアウトの後、古い子を削除し、新しい子に「app-enter」および「app-enter-active」クラスを追加します。
  3. タイムアウトに入った後、そのクラスを削除します

これを取得する簡単な方法はありますか？ありがとう！

0 投票する
1 に答える
946 参照

css - ReactCSSTransitionGroup が変換変換で適切にアニメーション化されない

ルート間にアニメーションを追加しても問題ありません。しかし、次のように簡単なことを試すと：

CSS:

不透明部分は完全に機能しますが、translateX 部分はまったく機能しません。何も動かなかった。

div の css には、特別な#introものは何もありません。fonttext-alignwidthfloat:right

0 投票する
2 に答える
3039 参照

reactjs - シングルページアプリでコンポーネントを再マウントせずに React Router でルートを更新する方法は?

React/Redux/React-Router/React-Router-Redux アプリケーションのアドレスバーでルートを「表面的に」更新する方法を探しています。ルートが変更されたときにコンポーネントを実際に再マウントする必要はありません。

React CSS Transition Groups を使用して、ルートに入るアニメーションを作成しています。したがって、ユーザーが

/home/

に

/home/profile/bob、

アニメーションが発生します。

ただし、一度オン/home/profile/bobにすると、ユーザーは左右にスワイプして他のプロファイルにアクセスできます/home/profile/joe。

これが発生したときにアドレスバーのURLを更新したいのですが、現在、profileコンポーネントが再マウントされ、CSSトランジショングループが再トリガーされ、アニメーションがトリガーされます.プロファイル ルート間の切り替え時ではなく、非プロファイル ルートからプロファイル ルートへ。

これが理にかなっていることを願っています。基本的に、そのルートを管理するコンポーネントの再マウントを強制することなく、アプリの URL を「表面的に」更新する方法を探しています。

0 投票する
2 に答える
6015 参照

javascript - ReactJS onClick ReactCSSTransitionGroup アニメーション

私はアニメーションに反応して反応するのが初めてです。そのため、ページの読み込み時に「表示」アニメーションを使用すると、すべてが機能します。しかし今、私には問題があります。ナビゲーションをクリックすると、新しい div がすぐに表示されるだけでなく、ゆっくりとフェードイン (またはそのマザーの他のアニメーション) されますが、機能しません。

TLDR; onClick イベントは、設定したばかりのアニメーションを新しいクラスにしません。

また、Web サイトの特定の部分にスクロールしたときにのみ ReactCSSTransitionGroup が機能するようにする方法を誰かが知っているでしょうか? ありがとう！

}

0 投票する
1 に答える
304 参照

reactjs - ReactCSSTransitionGroupでアイテムの順序を指定するには?

でアイテムの順序を指定することはできますReactCSSTransitionGroupか?

順序が重要なアイテムのリストを考えてみましょう。1 つのアイテムを表示し、隣接するアイテムを 1 つのアクションで非表示にする場合、ReactCSSTransitionGroupそれらの順序が混乱します。次のフィドルを見てください。アイテムは[1, 2, 3, 4, 5].

http://jsfiddle.net/mehranziadloo/kb3gN/15519/

アイテムの順序を伝えるReactCSSTransitionGroup(または) ことは可能ですか?ReactTransitionGroup

0 投票する
1 に答える
2714 参照

javascript - ReactCSSTransitionGroup が機能しない

要素をフェードインさせようとしていますが、何もしません。全体的な目標は、状態を切り替えたときに要素を表示することです（クリックしてトリガーすることによりshowOptions()）

ただし、このクリック ハンドラーの有無にかかわらず、アニメーションをまったく動作させることができないようです。

そしてここにcssがあります


12345678910