Liste Reorder Animation mit angularjs

Ich arbeite an einem Projekt in angularjs, die eine Liste von Objekten hat, die in Echtzeit aktualisieren und mit jedem Update neu geordnet werden. Ich möchte, diese Objekte animieren von ihrem Ausgang zu ihren Endpositionen zu bewegen reibungslos, so zum Beispiel, wenn die Liste Neuordnungs sind:Liste Reorder Animation mit angularjs

A   C 
B -> A 
C   B

A und B wird jeweils nach unten zu verschieben einer Stelle, und C zwei Punkte nach oben, doppelt so schnell. Dies ist leicht getan, wenn Sie die DOM manuell manipulieren - wenn Sie das Listenelement bewegen, indem es style.top, setzen Sie gerade

transition-duration: 0.5s, 0.5s; 
transition-property: top;

in die CSS für das Element, und es geschieht automatisch. Dieser Trick funktioniert jedoch nicht, wenn Sie ngRepeat verwenden, um Ihre Liste anzuzeigen, weil (soweit ich das beurteilen kann) angular tatsächlich die DOM-Elemente neu erstellt, aus denen die Liste besteht, um ein Update durchzuführen, anstatt die DOM-Elemente zu verschieben.

Leider habe ich es wirklich schwer gefunden, diese Funktionalität mit eckigen Animationen zu reproduzieren. Das Problem, auf das ich stoße, ist, dass angulare Bewegungsanimationen die Ausgangsposition jedes Elements nicht zu kennen scheinen. Mit der ngAnimate-Anweisung können Sie angular automatisch eine CSS-Klasse für Ihr Element festlegen, wenn es sich bewegt, um es zum Beispiel ein- oder auszublenden. Aber du hast keine Informationen darüber, wo das Element war, also kannst du es nicht reibungslos von seiner alten Position bewegen - es wird einfach an die neue Stelle teleportiert und du musst es dort tanzen lassen. Soweit ich das beurteilen kann, gilt dies auch für JavaScript-Animationen - eckige teleportiert sie und gibt sie dann an Ihre Funktion weiter, ohne irgendwelche Historieninformationen.

Gibt es einen Weg innerhalb von eckig, um eine reibungslose Neuordnungsanimation wie oben beschrieben zu haben, ohne das Framework zu verwerfen und die DOM-Manipulation selbst zu handhaben?

Quelle

2013-08-30 Patrick Thill

Werfen Sie einen Blick auf diese [Frage] (http://stackoverflow.com/questions/16431136/angularjs-how-can-i-animate-sorting-a-list-with-orderby-using-ng -wiedermal mit-n). Außerdem können Sie immer eine benutzerdefinierte Anweisung schreiben, um jegliche DOM-Manipulation durchzuführen, die Sie benötigen. –

Danke, das ist perfekt! Es ist mir ein wenig peinlich, dass ich diese Frage nicht finden konnte, als ich suchte ... :-) –

Warum nicht einfach Klassen und Übergänge benutzen? Hängen Sie einfach eine Order-Klasse an die Elemente an, und wenn die Klasse sich ändert/aktualisiert, werden sie an die richtige Position übergehen. – monners

-1

Ich denke, das ist das, was Sie suchen: http://www.nganimate.org/angularjs/ng-repeat/move

Quelle

2014-02-15 08:44:55 eyalap

scheint nicht mehr aktuell zu sein –

Das zeigt nicht, wie man die ** Neuordnung ** von Artikeln animiert; Es zeigt nur das Hinzufügen und Entfernen von Objekten. –

Ich glaube, ich habe erreicht, was Sie suchen hier: http://codepen.io/daleyjem/pen/xbZYpY

von track by verwenden, ich bin in der Lage zu halten, die DOM-Elemente werden neu erstellt und können dann ihre Position manipulieren.

<div ng-repeat="item in items | orderBy:sorter track by item.id" class="item" jd-script> 
    {{ item.id }}: {{ item.last_name }}, {{ item.first_name }} 
</div>

Quelle

2014-12-08 17:14:00 daleyjem

Das war so hilfreich, danke! –

Antwort

Verwandte Themen