Kreacja listy zamówień z angularjs

Question

Pracuję nad projektem w angularjs, który ma listę obiektów, które aktualizują się w czasie rzeczywistym i zostaną zaktualizowane przy każdej aktualizacji. Chcę animować tych obiektów poruszających się płynnie od ich wyjścia do ich pozycji końcowych, tak na przykład, gdy lista ponownego zamówienia jest:

A   C 
B -> A 
C   B 

A i B będzie każdy ruch w dół jedną plamkę i C przesunie się o dwa miejsca, dwa razy szybciej. Można to łatwo zrobić, jeśli są ręcznie manipulowania DOM - jeśli jesteś w ruchu elementu listy, zmieniając to style.top, wystarczy umieścić

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

w CSS dla elementu i to dzieje się automatycznie. Jednak ta sztuczka nie zadziała, jeśli używasz ngRepeat do wyświetlania listy, ponieważ (o ile mogę to stwierdzić) kątowa faktycznie odtwarza elementy DOM tworzące listę, aby wykonać aktualizację, zamiast przenosić elementy DOM wokół.

Niestety, naprawdę trudno jest odtworzyć tę funkcję za pomocą animacji kątowych. Problem, na który się natknę, polega na tym, że animacje ruchu kątowego wydają się nie wiedzieć o pozycji początkowej każdego elementu. Dzięki dyrektywie ngAnimate możesz mieć kątowy automatycznie ustawić klasę css na swoim elemencie, gdy się porusza, aby symulować na przykład zanikanie lub zanikanie. Ale nie masz informacji o tym, gdzie kiedyś był ten element, więc nie możesz go płynnie przenieść ze starej pozycji - po prostu zostanie przeniesiony do nowego miejsca i musisz sprawić, by tańczył w tym miejscu. O ile wiem, dotyczy to również animacji javascript - kątowe teleportuje ją na miejsce, a następnie przekazuje do swojej funkcji bez żadnych informacji historycznych.

Czy istnieje sposób w zakresie kątowym, aby uzyskać płynną animację zmiany kolejności, jak opisano powyżej, bez zrzutu ram i samodzielnego manipulowania DOM?

Answer 1

myślę, że to jest to, czego szukasz: http://www.nganimate.org/angularjs/ng-repeat/move

Answer 2

Chyba osiągnąć to, czego szukasz tutaj: http://codepen.io/daleyjem/pen/xbZYpY

Korzystając track by, jestem w stanie utrzymać elementy DOM zostaną odtworzone, a następnie mogą manipulować ich pozycją.

<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>