AngularJS - only animating in one direction?

Question

I have 5 items in an array. When I reshuffle them I only see animations for items that end up with a higher index - the other just jump to the new spot.

  <div ng-repeat="item in items track by item.value" class="TestItem" ng-style="{'top' : $index * 20 + 'px'}">
      {{item.name}}
  </div>

CSS

.TestItem{
  transition: all linear 2s;
  position: absolute;
}

How can I make all items animate to their new top position??

Is it possible to put a plunkr together? Need to see how you're adding items etc, as Angular will rebuild your entire list if you put these in the front of your array, but not if you put them on the end.. — Darren Wainwright, Dec 16 '14 at 21:15

score 0 · Accepted Answer · edited May 23 '17 at 12:20

The elements that end up with a lower index will be removed from the DOM and inserted at their new positions. When elements are added to the DOM their CSS transitions are not animated (at least not in any of the major browsers).

The rest of the elements will remain in the DOM, get new top values and their transitions will be animated.

Below is a demo using ngAnimate and ng-move to color the moving elements red (the ones removed from the DOM ans inserted again). As described above, these are the elements that do not get their top transition animated.

Demo: http://plnkr.co/edit/7QFMSgo60vQ2qfYzqsBI?p=preview

One solution to this problem can be found here.

AngularJS - only animating in one direction?

1 Answers1