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