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

8

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

Damon
quelle

Antworten:

1

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

fxdxpz
quelle
Ich freue mich, dass Ihre Lösung das blinkende Problem löst, obwohl ich mich frage, ob Sie erklären können, warum Sie setImmediate()in Zeile 75 verwendet haben. setImmediateist laut MDN nicht Standard und sie empfehlen, nicht in der Produktion zu verwenden, was meine komplette App beabsichtigt.
Damon
Sie können es in setTimeout ändern. Es war nur etwas, mit dem ich experimentiert habe und das für Ihr Problem nicht wichtig ist
fxdxpz
Vielen Dank, dass Sie mir bei der Lösung dieses Problems geholfen haben! Ich habe Ihnen die Prämie :) vergeben
damon
1

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

RaviNila
quelle
In Ihrer Version gibt es ein Blinken in der Zeile, aus der das Element gezogen wurde.
fxdxpz
Das Blinken erfolgt aufgrund der dynamischen Größenänderung. Wenn alle Artikel gleich groß sind, wird es wahrscheinlich nicht passieren.
RaviNila
Es passiert, wenn es sich um dasselbe Element in jeder Zeile handelt, das herumgezogen wird. Darüber hinaus können Sie jeder Zeile nur ein Element hinzufügen und es verschieben. Es
blinkt
Ich wünschte, ich könnte das Kopfgeld aufteilen, aber da @PompolutZ das flackernde Problem beheben konnte, musste ich es ihm geben. Ich freue mich sehr über Ihre erste Hilfe.
Damon