javascript - googleapis - Listar animacion reordenar con angularjs

googleapis angularjs

Question

Estoy trabajando en un proyecto en angularjs que tiene una lista de objetos que se actualizan en tiempo real y se reordenarán con cada actualización. Quiero animar estos objetos moviéndose sin problemas desde su inicio hasta sus posiciones finales, por ejemplo, cuando la lista de pedidos es:

A C
B -> A
C B

A y B se moverán cada uno hacia abajo un punto, y C subirán dos puntos, dos veces más rápido. Esto se hace fácilmente cuando está manipulando el DOM manualmente - si está moviendo el elemento de la lista cambiando su estilo.

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

en el CSS para el elemento y pasa automáticamente. Sin embargo, este truco no funcionará si está usando ngRepeat para mostrar su lista, porque (por lo que puedo decir) angular realmente recrea los elementos DOM que forman la lista para hacer una actualización, en lugar de mover los elementos DOM alrededor.

Desafortunadamente, me ha resultado muy difícil reproducir esta funcionalidad con animaciones angulares. El problema con el que me estoy topando es que las animaciones de movimiento angular parecen desconocer la posición inicial de cada elemento. Con la directiva ngAnimate, puede hacer que Angular establezca automáticamente una clase css en su elemento cuando se mueva, para simular su desvanecimiento o desvanecimiento, por ejemplo. Pero no tiene información sobre dónde solía estar el elemento, por lo que no puede moverlo sin problemas desde su antigua posición, simplemente se teletransporta al nuevo lugar y tiene que hacerlo bailar por ahí. Por lo que puedo decir, esto también es cierto para las animaciones de javascript: angular lo teletransporta a su lugar y luego lo pasa a su función, sin ninguna información de historial.

¿Hay una manera dentro de angular de tener una animación de reordenación suave como se describe anteriormente, sin abandonar el marco y manejar la manipulación de DOM usted mismo?

Answer 1

Creo que esto es lo que estás buscando: http://www.nganimate.org/angularjs/ng-repeat/move

Answer 2

Creo que he logrado lo que estás buscando aquí: http://codepen.io/daleyjem/pen/xbZYpY

Al usar track by , puedo evitar que los elementos DOM se vuelvan a crear y luego pueden manipular su posición.

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