jQuery UI sortierbare Auslöser css3-Animation beim Sortieren
Ich habe ein paar Sorables mit CSS3-Keyframe-Animationen, die auf ihnen durch eine Klasse definiert sind. Beim Sortieren habe ich merkwürdiges Verhalten bemerkt, wie man es in dieser Geige sieht.
%Vor%Initiieren von jQuery sortierbar.
%Vor% Die Animation wird bei sort start und stop ausgelöst, während die Animationsklasse nicht erneut angewendet wird. Es scheint so, als ob es eine Art Reflow gibt, der dadurch verursacht wird, dass jQuery das DOM verändert. Aber wie löst es die Animation aus und kann sie vermieden werden? Das Ziel ist, beim Sortieren keine Animation zu haben, während die Klasse beibehalten wird.
Antwort: Es macht Sinn, da das Element, das wir gerade ziehen, nur ein Klon ist, animiert es auf start , weil wir den Klon in das DOM einfügen . Die Animation, die in stop auftritt, hat die gleiche Ursache, da der Klon dann an seine neue Position angehängt wird, was wiederum einen Reflow des Dokuments auslöst.
4 Antworten
Ich denke, Sie müssen die slideLeft -Klasse von li-Elementen entfernen, nachdem die Animation beendet ist. Etwas wie:
});
Ich hoffe, dass ich nützlich bin.
PD.
Beim Sortieren einer Liste ändert jquery-ui das DOM, weil das Element entfernt und erneut eingefügt wird. Außerdem erstellt jquery-ui ein weiteres Element mit den gleichen Eigenschaften wie Platzhalter und zeigt die Stelle an, an die das Element verschoben werden soll.
Wenn Sie die Klasse slideLeft nicht entfernen, wird die Animation mit jeder Änderung in der Liste abgespielt
Sie erzwingen, dass der Platzhalter mit! Wichtig sichtbar gemacht wird.
Wenn Sie die Datei inspizieren, sehen Sie, dass der Platzhalter für den ui-sortierbaren Inhalt inline ist
%Vor%wird durch die letzte Zeile in der obigen css überschrieben. Sie können es entweder mit etwas überschreiben wie:
%Vor%oder etwas Ähnliches. Dies macht den linken Teil der Folie auch unsichtbar und zeigt nur den "Bounce" -Anteil der Animation (nicht sicher, ob das was du willst oder nicht).
Sie können dies unter Ihrem Skript hinzufügen
%Vor% Dieses Skript wartet auf das Ende der Animation (1000 ms) und entfernt dann die Klasse slideLeft aus dem ersten Listenelement. ABER, wenn Sie schnell sind und die erste Zeile innerhalb der Sekunde auswählen, bleibt das Problem bestehen. Also, was ich tun würde, ist Ihr Skript um die Timeout-Funktion zu wickeln:
Dies wartet eine Sekunde (1000ms), um die Liste sortierbar zu machen. Nach dieser Sekunde wird auch die Klasse slideLeft entfernt, um eine fortlaufende Animation zu verhindern. Nachteil ist, dass Sie die Liste nicht für 1 Sekunde sortieren können.
Hier ist die komplette Geige basierend auf Ihrem Skript:
Tags und Links javascript jquery jquery-ui jquery-ui-sortable