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-group
eine "Enter" -Animation aus.
Ich habe jedoch auch react-beautiful-dnd
installiert, 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
Eine Karte wird in eine andere Zeile gezogen.
Eine Reihe wird neu angeordnet und die 2 Zeilen haben eine unterschiedliche Anzahl von Karten.
Seltsamerweise werden die unerwünschten Animationen nicht auftreten , wenn
- Eine Karte wird an eine neue Position in ihrer ursprünglichen Zeile gezogen.
- 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-group
Animationen nicht ausgelöst werden, wenn das state
mithilfe von geändert wird react-beautiful-dnd
.
Sandbox meines Problems (Weitere Informationen in den Kommentaren in der App.js
Datei):
setImmediate()
in Zeile 75 verwendet haben.setImmediate
ist laut MDN nicht Standard und sie empfehlen, nicht in der Produktion zu verwenden, was meine komplette App beabsichtigt.In haben
App.js
Sie den folgenden Kommentar erwähnt, der Ihre Anforderung ist:Was ich möchte:
Ich möchte, dass die
react-transition-group
Animationen nur ausgelöst werden, wenn ein neuer Status hinzugefügt wirdund nicht, wenn der Status durch Ziehen und Ablegen geändert wird (mit der
onDragEnd
Funktion);Dieses Problem kann einfach durch Einführung einer neuen Flagge behoben werden
hasNewCard
. Dieses Flag wirdtrue
nur angezeigt, wenn eine neue Karte erstellt wird, nicht, wenn der Status von geändert wirdonDragEnd
.Hier
react-transition-group
sollte die Animation also nur ausgelöst werden, wenn dies der FallhasNewCard
isttrue
.CodeSandbox-Version:
https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-share-o25ej
quelle