Javascript 带ngFor的过渡延迟角4

我正在尝试对

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>

必须改进过渡，但它确实起作用

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

您可以在持续时间之后传递延迟

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

您需要计算列表中每个项目的延迟，以实现平稳过渡。

为了实现每个项目的延迟，您需要升级到4.2.0–4.3.2版中的角度版本，以使用实验性

交错
动画功能

trigger('myAwesomeAnimation', [
  transition(':enter', [
    query(':leave', [
      style({transform: 'scale(0.8)',}),
      stagger(100, [
        animate('1.5s ease-out', style({transform: 'scale(1)',})),
      ])
    ]),
    ...
  ]),
])

参考：




交错（）只能在查询（）中使用
trigger('myAwesomeAnimation', [
  transition(':enter', [
    query(':leave', [
      style({transform: 'scale(0.8)',}),
      stagger(100, [
        animate('1.5s ease-out', style({transform: 'scale(1)',})),
      ])
    ]),
    ...
  ]),
])