Search code examples
angularjsng-animate

AngularJS - only animating in one direction?

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

Solution

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