Liste Reorder Animation mit angularjs

Question

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:

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?

Answer 1

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

Answer 2

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>