javascript - ngForを使用した遷移遅延角度4

Question

の各アイテムの遅延を伴う遷移を作成しようとしていngForます。

各アイテムは、前のアイテムの数ミリ秒後にアニメーション化する必要があります。

これは私のコンポーネントコードです:

@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)',})),
            ]),
        ])
    ]
})

そしてそのhtmlマークアップ：

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

angular transition の引数として遅延を渡す方法はありますか?

編集

Oluwafemi Suleの回答によると、よろめきが解決策でした：

    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})
      ])

移行を改善する必要がありますが、それは仕事をします。

そして HTML マークアップ:

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