filipows/angular-animations

Usage with query, stagger and limit

Opened this issue · 0 comments

MickL commented

Maybe I am stupid but is it possible to use the animations with query? Specifically I wanted to create a stagger animation and use the limit:

Code:

animations:      [
    trigger('fadeIn', [
      transition(':enter', [
        query(':enter', [
          style({opacity: 0}),
          stagger('80ms', [
            animate('500ms', style({opacity: 1})),
          ])
        ], {limit: 6})
      ])
    ])
  ]

Template:

<div class="items" @fadeIn>
    <div class="item" *ngFor="let item of items"></div>
</div>