CODEWITHSUNDEEP
cssangularjsng-animate
Oam Psy
Oam Psy

Reputation: 8663

Chain ng-repeat item transitions

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

Upvotes: 0

Views: 550

Answers (1)

jim0thy
jim0thy

Reputation: 2155

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

Upvotes: 1

Related Questions