22

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?

<ul>
   <li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}">
     <img src="{{phone.img}}"> {{phone.name}}
   </li>
</ul>

Using ngAnimate it would be nice if it would be possible to delay the animation of each item e.g. like this:

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

Is there a way to solve this?

Thanks!

Added to GitHub https://github.com/angular/angular.js/issues/2460

doorman
  • 15,707
  • 22
  • 80
  • 145
  • Can you be more specific on what you want to do? – Josh David Miller Apr 09 '13 at 00:15
  • I refrased the question... – doorman Apr 09 '13 at 09:05
  • 1
    That's much clearer - thanks for rephrasing. Unfortunately I don't think that's currently possible with ngAnimate. ngAnimate uses CSS transitions and triggers them with class names based on events. When the ngRepeat first runs, all those existing items have their event at essentially the same time. I'll think a little more on it though... – Josh David Miller Apr 09 '13 at 18:05
  • 1
    Great Question: If you get the answer, contact me, I'm making a site with angular animations help: [AngularJS Animations](http://www.nganimate.org) – Bruno Croys Felthes May 22 '13 at 15:14

2 Answers2

27

This is now supported natively with 1.2: https://docs.angularjs.org/api/ngAnimate#css-staggering-animations

To make use of it, use the ng-enter-stagger selector in your CSS, like so:

css:

.animated.ng-enter-stagger {
  transition-delay: 0.3s;
  animation-delay: 0.3s;
}

sass (if in use):

=stagger($delay)
  &-stagger
    transition-delay: $delay
    animation-delay: $delay

.animated
  &.ng-enter
    +stagger(0.3s)
Jossef Harush Kadouri
  • 32,361
  • 10
  • 130
  • 129
matsko
  • 21,895
  • 21
  • 102
  • 144
14

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;
}

Here is a fork of the example created by heyotwell.

user2418191
  • 141
  • 4