Angular.js: ngRepeat: Cascading effect during ngAnimate

[doorman02]

When using ngAnimate to fade in each item in ngRepeat, currently all items fade in at the same time. Is it possible for each item to fade in after the previous item has faded to e.g. 50% resulting in a cascading effect?

This could maybe be achieved by adding a delay before applying the css animation style for each item in ngrepeat. It would be nice to be able to specify a delay e.g. like this:

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}">

By the way, Angularjs is awesome :)

[brunocf]

+1 for this feature!

[Drenamai]

You can get this effect by setting the transition-delay style on the repeated element. (Requires v1.1.5)

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{$index * 500}}ms">

You'll have to set your transition properties separately in your CSS, otherwise the inline style will overwrite the entire transition:

.phone-enter {
  opacity:0;
  -webkit-transition-property: all;
  -webkit-transition-timing-function: ease-out-cubic;
  -webkit-transition-duration: 400ms;
}
.phone-enter.phone-enter-active {
  opacity: 1;
}

This works great for a linear cascading effect. I tried to randomize this effect by adding a method to the scope to return a value from Math.random() (you get null value if you try to use Math.random in the template expression.) and used it in place of $index:

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{random() * 500}}ms">

gbApp.controller('MainCtrl', function ($scope) {
    ...
   $scope.random = function(i) {
      return Math.random();
  };
  ...
}

This works, but throws the error "Uncaught Error: 10 $digest() iterations reached. Aborting!" along with a dump of the the last 5 iterations.

Angular must be expecting the delay to be a constant value, so I tweaking the random method to accept $index as a parameter:

<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter'}" style="transition-delay: {{random($index) * 500}}ms">

Then changed the random method to store a random number for each index in an array and return that number if one already exists for that index:

gbApp.controller('MainCtrl', function ($scope) {
    ...
  var delays = [];
  $scope.random = function(i) {
     if(!delays[i]) {
      delays[i] = Math.random();
    }
    return delays[i];
  };
  ...
}

This now works without throwing errors.

A native implementation of this feature would be awesome!

[matsko]

This is planned for 1.1.6. Currently working on getting a proper implementation for it. Most likely it will be an additional attribute on the element since it can't be placed in CSS.

[kevin-smets]

Will the feature in 1.1.6 work both ways? The problem I'm facing currently is that the inline style works superbly, but only when "entering" elements. When leaving, it will start with the elements at the beginning of the list for an ngRepeat. You should be able to work backwards also (end of list to beginning) in order to animate properly, no?

[matsko]

Hey guys. Sorry for this still pending. Animation development is still planned for this for 1.1.6. NgClass is getting the attention this week. Will reply early next week once I get back to finalizing this.

[windyGex]

a

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[doorman02]

Hi @matsko is there already an update that handles cascading animation effect when using ngRepeat?

Thanks!

[matsko]

This is planned feature and there's an OK to work on it. Getting through the other important fixes for ngAnimate first for 1.2.

[doorman02]

Thanks for the update, looking forward to 1.2

[matsko]

There's a pure CSS feature right now in master: https://github.com/angular/angular.js/commit/74848307443c00ab07552336c56ddfa1e9ef6eff

The JS version will come out in 1.2.1/1.3.1.

[windyGex]

Test

At 2013-10-21 08:43:03,"Matias Niemelä" [email protected] wrote:

This is planned feature and there's an OK to work on it. Getting through the other important fixes for ngAnimate first for 1.2.

—
Reply to this email directly or view it on GitHub.

[matsko]

I'll provide detailed instructions once 1.2 it released.