I'm trying to make a transition with delay for each item in a ngFor.

Each item must be animated a few ms after previous item.

This is my component code :

@Component({

    selector: 'bookmark-list',

    templateUrl: './bookmark.list.component.html',

    providers: [BookmarkService],

    styleUrls: ['./bookmark.list.component.less'],

    animations: [

        trigger('myAwesomeAnimation', [

            transition(':enter', [

                style({transform: 'scale(0.8)',}),

                animate('1.5s ease-out', style({transform: 'scale(1)',})),

            ]),

        ])

    ]

})

And its html markup:

<div class=col-sm-6 col-md-4 col-lg-3 *ngFor=let bookmark of bookmarks | bookmarkPipe:search>

  <div [@myAwesomeAnimation]='large'>

    <bookmark-item [bookmark]=bookmark></bookmark-item>

  </div>

</div>

There is a way to pass delay as an argument to angular transition ?

EDIT

According to Oluwafemi Sule answer, stagger was the solution :

    transition('* => *', [

        query(':leave', [

          stagger(

            100, [

              animate('0s ease-in-out', style({

                transform: 'scale(0.8)'

              }))

            ]

          )

        ], {optional: true}),

        query(':enter', [

          style({

            transform: 'scale(0.8)',

          }),

          stagger(100, [

            animate('0.5s 0.7s ease-in-out', style({

              transform: 'scale(1)',

            }))

          ])

        ], {optional: true})

      ])

Transition must be improved but it do the job.

And HTML markup :

<section class=row [@myAwesomeAnimation]='bookmarks.length'>

    <div class=col-sm-6 col-md-4 col-lg-3 *ngFor=let bookmark of bookmarks | bookmarkPipe:search>

      <bookmark-item [bookmark]=bookmark></bookmark-item>

    </div>

  </section>