Wie kann ich dafür sorgen, dass "React-Beautiful-Dnd" keine "React-Transition-Group" -Animation auslöst?

Video zur Demonstration meines Problems: https://i.imgur.com/L3laZLc.mp4

Ich habe eine einfache App, in der Sie Karten zu 2 verschiedenen Zeilen hinzufügen können. Wenn einer Zeile eine Karte hinzugefügt wird, löse ich react-transition-groupeine "Enter" -Animation aus.

Ich habe jedoch auch react-beautiful-dndinstalliert, um das Ziehen von Karten zwischen den Zeilen zu ermöglichen und um die Zeilen selbst neu zu ordnen. Aber wenn eine Karte in eine neue Reihe verschoben wird oder wenn die Reihen neu angeordnet werden, haben einige der Karten ihr "Enter" -Animationsfeuer, das sehr seltsam aussieht und nicht passieren sollte.

Beim Ziehen wird die unerwünschte Animation ausgelöst, wenn

1. Eine Karte wird in eine andere Zeile gezogen.

2. Eine Reihe wird neu angeordnet und die 2 Zeilen haben eine unterschiedliche Anzahl von Karten.

Seltsamerweise werden die unerwünschten Animationen nicht auftreten , wenn

1. Eine Karte wird an eine neue Position in ihrer ursprünglichen Zeile gezogen.
2. Die Zeilen werden neu angeordnet und die Zeilen haben die gleiche Anzahl von Karten.

Ich würde gerne wissen, wie ich es haben kann, damit die react-transition-groupAnimationen nicht ausgelöst werden, wenn das statemithilfe von geändert wird react-beautiful-dnd.

Sandbox meines Problems (Weitere Informationen in den Kommentaren in der App.jsDatei):

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

Ich habe die Lösung von RaviNila geändert, um das oben erwähnte Blinken beim Ziehen zwischen Zeilen zu entfernen, indem eine zusätzliche Sammlung von Stilen eingeführt wird. Dieses Blinken wurde durch diese CSS-Eigenschaft verursacht:

transition: all 200ms ease-out;

Wenn das Element als Teil von TransitionGroup gerendert wurde, obwohl es auf Timeout 0 und "" als Klasse festgelegt war, wurde der Übergang weiterhin ausgeführt, wahrscheinlich weil newCardItem Änderungen in setTimeout vorgenommen wurden. Durch das Entfernen von setTimeout wird die Animation jedoch vollständig beendet. Wenn Sie also die Stile ohne diese Übergangseigenschaft wiederholen, wird Ihr Problem vollständig behoben.

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

In haben App.jsSie den folgenden Kommentar erwähnt, der Ihre Anforderung ist:

Was ich möchte:

1. Ich möchte, dass die react-transition-groupAnimationen nur ausgelöst werden, wenn ein neuer Status hinzugefügt wird

2. und nicht, wenn der Status durch Ziehen und Ablegen geändert wird (mit der onDragEndFunktion);

Dieses Problem kann einfach durch Einführung einer neuen Flagge behoben werden hasNewCard. Dieses Flag wird truenur angezeigt, wenn eine neue Karte erstellt wird, nicht, wenn der Status von geändert wird onDragEnd.

Hier react-transition-groupsollte die Animation also nur ausgelöst werden, wenn dies der Fall hasNewCardist true.

CodeSandbox-Version:

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