web-dev-qa-db-ja.com

`react-beautiful-dnd`が` react-transition-group`アニメーションをトリガーしないようにするにはどうすればよいですか？

私の問題を示すビデオ： https://i.imgur.com/L3laZLc.mp4

カードを2つの異なる行に追加できるシンプルなアプリがあります。カードが行に追加されると、react-transition-groupを使用して「入力」アニメーションをトリガーします。

ただし、react-beautiful-dndをインストールして、カードを行間でドラッグしたり、行自体を並べ替えたりすることもできます。ただし、カードが新しい行に移動されたとき、または行が並べ替えられたときに、一部のカードには「エンター」アニメーションが発生します。

ドラッグすると、次の場合に不要なアニメーションが発生します

  1. カードは別の行にドラッグされます。

  2. 行が再注文され、2つの行のカードの数が異なります。

奇妙なことに、不要なアニメーションは発生しません

  1. カードは、元の行内の新しい位置にドラッグされます。
  2. 行は並べ替えられ、行には同じ数のカードがあります。

react-transition-groupを使用してstateを変更したときにreact-beautiful-dndアニメーションが起動しないようにするには、どうすればよいか知りたいのですが。

私の問題のサンドボックス（App.jsファイルのコメントに詳細情報）：

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

cssreactjsanimationreact-transition-groupreact-beautiful-dnd
8
damon

RaviNilaによるソリューションを変更し、スタイルの追加のコレクションを誘導することにより、行間をドラッグしたときに言及されるまばたきを削除しました。この点滅は、次のcssプロパティによって引き起こされました。

transition: all 200ms ease-out;

クラスとしてタイムアウト0および ""に設定されていても、項目がTransitionGroupの一部としてレンダリングされた場合、おそらくnewCardItemがsetTimeoutで変更されたために、遷移が引き続き発生しました。ただし、setTimeoutを削除すると、アニメーションが完全に終了します。したがって、その遷移プロパティなしでスタイルを繰り返すと、問題が完全に修正されます（faics）。

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-share-bpc4

1
fxdxpz

App.jsあなたはあなたの要件である次のコメントに言及しました：

欲しいもの：

  1. react-transition-group新しい状態が追加されたときにのみアニメーションが起動する

  2. （onDragEnd関数を使用して）ドラッグアンドドロップによって状態が変更されたときではありません。

この問題は、新しいフラグhasNewCardを導入するだけで修正できます。このフラグは、新しいカードが作成されたときにのみtrueになります。状態がonDragEndによって変更されたときではありません。

だからここreact-transition-groupアニメーションは、hasNewCardがtrueの場合にのみ起動する必要があります。

CodeSandboxバージョン：

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-share-o25ej

1
RaviNila