Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?

Question

I'm moving some elements in the page using ng-repeat and CSS transitions. If I change the data array using unshift the list transitions nicely. (In my application I'm transitioning position as well as opacity.)

If, however, I use shift to update the array, the DOM is updated immediately with no transition.

Here's a demo of one approach, where all works as expected aside from the transitions. Compare the behavior when using the two buttons.

$scope.items.push( $scope.items.shift() );

Here's another demo of an alternative approach, where the transitions work, but the array loses an element each time the function runs.

$scope.items.shift( $scope.items.push() );

The idea is that the user can cycle through the items in the array indefinitely and the CSS transitions occur in both directions. What seems to be the issue is that AngularJS updates the DOM in one case, but not in the other, though I wasn't able to demonstrate that in my testing.

Also, based on some reading I did I tried using track by item.id with no success. Thanks much.

Answer 1

Very curious.

I was playing around with different possible solutions and one thing I found is that if you change your slide up to:

$scope.slideUp = function() {
    $scope.items.push( angular.copy($scope.items.shift()) );
};

It will animate the third item. So it could be a reference issue within angular?

Note: In my fiddle below, while playing around I also made changes to your ng-class and css, but it still works the same with your first demo fiddle.

Demo