Setting class dinamically from inside a directive not working properly with ng-animate

Question

I'm loading a list of items from this public API. After it loads the list, I apply a transition to the elements using:

/* ng-active */
.ng-enter{
    opacity: 0.2;
    padding-left: 30px;
    transition: all ease 1000ms;
}
.ng-enter-active{
    opacity: 1.0 ;
    padding-left: 0px ;
}
.ng-enter-stagger{
    transition-delay: 0.9s ;
    -webkit-transition-delay: 0.9s ;
    transition-duration: 0s ;
    -webkit-transition-duration: 0s ;
}

But, I need to change the backgorund-color in some items from inside a directive. To do that I'm using ng-class to call a function that make some logic to apply a specific class. This is the directive:

angular.module('myApp').directive('list', function() {
    return {
        restrict: 'E',
        template: ''+
        '<div id="{{$index}}" ng-repeat="value in values track by $index"'+
        'ng-class="getCSSClass(value.suite)">'+
        '<PRE><span class="id">{{value.id}}</span>'+
        '<span class="suite">({{value.suite}})</span>'+
        '<span class="aspace">°</span>[{{value.name}} , {{value.username}}] <br />'+
        '<span class="phone">{{value.phone}}</span><br/>'+
        '<span class="email">{{value.email}}, {{value.website}}</span></PRE>'+
        '</div>'+
        '',
        replace: true,
        controller: function($scope) {
            $scope.getCSSClass = function(suite) {
                return suite <= 500 ? "postBody backgr" : "postBody";
            }
        }
    }
});

But in those items where the backgorund-color is changed, the animation is not applied correctly. This is a plnkr where you can see the issue.

What I need is that all the items in the list, could be animated in order.

Answer 1

Move the background class selector to a separate <div> element so that is doesn't confuse the stagger animation:

angular.module('myApp').directive('list', function() {
    return {
        restrict: 'E',
        template: ''+
        '<div id="{{$index}}" ng-repeat="value in values track by $index"'+
        //'class="postBody" ng-class="{backgr: value.suite<=500}">'+
        'class="postBody"><div ng-class="{backgr: value.suite<=500}">'+
        '<PRE><span class="id">{{value.id}}</span>'+
        '<span class="suite">({{value.suite}})</span>'+
        '<span class="aspace">°</span>[{{value.name}} , {{value.username}}] <br />'+
        '<span class="phone">{{value.phone}}</span><br/>'+
        '<span class="email">{{value.email}}, {{value.website}}</span></PRE>'+
        '</div></div>'+
        '',
        replace: true,
        controller: function($scope) {
            $scope.getCSSClass = function(suite) {
                //return suite <= 500 ? ["postBody", "backgr"] : "postBody";
                return suite <= 500 ? "backgr" : "";
            }
        }
    }
});

The DEMO on PLNKR.