`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

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

transition: all 200ms ease-out;

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

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

では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