Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?
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