Chain ng-repeat item transitions - css

Question

I have a simple scope of a list of names:
$scope.friends = [
{name:'John'},
{name:'Jessie'},
{name:'Johanna'},
{name:'Joy'},
{name:'Mary'},
{name:'Peter'},
{name:'Sebastian'},
{name:'Erika'},
{name:'Patrick'},
{name:'Samantha'}
];
I perform a simple ng-repeat over these items, and display on my front end. What i want to try to achieve is that each item/name transitions in, one after each other, like a chain.
The closet to the effect i have seen can be found here: http://jsfiddle.net/57uGQ/ however this uses jQuery libraries which i want to avoid.
I am using the ng-animate library if that helps?
See plunker: http://plnkr.co/edit/aGwEe2jlGBTvjoSsiK9p?p=preview

Answer 1

You can use a combination of ng-if, $timeout and the .ng-enter-stagger css class to replicate the effect in the jsfiddle example.
html:
<div ng-controller="repeatController">
<ul>
<li class="animate-repeat" ng-repeat="friend in friends" ng-if="!hidden">
{{friend.name}},
</li>
</ul>
</div>
js:
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope, $timeout) {
$scope.friends = [
{name:'John'},
{name:'Jessie'},
{name:'Johanna'},
{name:'Joy'},
{name:'Mary'},
{name:'Peter'},
{name:'Sebastian'},
{name:'Erika'},
{name:'Patrick'},
{name:'Samantha'}
];
$scope.hidden = true;
$timeout(function(){
$scope.hidden = false;
}, 10);
});
css:
.animate-repeat.ng-enter {
transition: 1s linear all;
opacity: 0;
}
.animate-repeat.ng-enter-stagger {
transition-delay: 1.2s;
transition-duration: 0s;
}
.animate-repeat.ng-enter.ng-enter-active {
opacity: 1;
}
Plunker