javascriptangularjsangularjs-directiveng-classng-animate

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


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.


Solution

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