search

filipows / angular-animations

:sparkles: Easy, Reusable Animation Utility library for Angular
https://filipows.github.io/angular-animations
MIT License
630 stars 88 forks source link

Usage with query, stagger and limit #100

Open MickL opened 3 years ago

MickL commented 3 years ago

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>