Angular - 如何以交错方式为组件列表设置动画答案

【问题标题】：Angular - How do you animate a list of components with staggerAngular - 如何以交错方式为组件列表设置动画
【发布时间】：2020-10-02 01:00:33
【问题描述】：

如何为组件列表设置交错动画？我还添加了一个没有组件列表的工作版本，这很有效。

正如我所说，我想使用组件来代替“渲染”页面中的组件

ts 文件：

import { Component } from '@angular/core';
import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

const listAnimation = trigger('listAnimation', [
  transition('* <=> *', [
    query(':enter',
      [style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))],
      { optional: true }
    ),
    query(':leave',
      animate('200ms', style({ opacity: 0 })),
      { optional: true}
    )
  ])
]);

@Component({
  selector: 'app-somelist',
  templateUrl: './some-list.component.html',
  animations: [listAnimation]
})

export class NocOverviewComponent {
  items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
}

html（不工作）：

<div [@listAnimation]="items.length">
  <app-list-item *ngFor="let item of items; let i = index">some list item- {{i}}</app-list-item>
</div>

HTML（这可行）

<div [@fadeInListAnimation]="items.length">
  <div class="item" *ngFor="let item of items; let i = index">
    some list item- {{i}}
  </div>
</div>

【问题讨论】：

你也可以使用animate.style动画css。导入它的 css 后，只需添加类 class='animated fadeIn'
我在代码stackblitz.com/edit/angular-qjcfcu中看不到任何错误
感谢您的评价。 animate.css 或简单的 css(animations) 不会产生我想要的效果。它将同时为组件设置动画，而不是作为一个序列。在您的示例中，您使用跨度而不是组件。正如我在问题中提到的那样。

标签： angular animation angular-components angular-animations

【解决方案1】：

我也遇到过类似的问题。在尝试使用 stagger 几个小时后，我的解决方案是使用 setTimeout() 延迟将组件添加到数组中，而不是使用 stagger 动画。

所以您的示例可能如下所示：

const listAnimation = trigger('listAnimation', [
    transition(':enter', [
      style({ opacity: 0 }), 
      animate('600ms ease-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms', style({ opacity: 0 }))
    ])
]);

<div *ngFor="let item of items" @listAnimation>
  {{ item }}
</div>

export class NocOverviewComponent {
  items: number[] = [];
  delay: number = 60; // Timing of the stagger in milliseconds

  constructor() {
    this.populateItems();
  }

  populateItems(): number[] {
    let count = 0;
    while (count < 22) {
      this.items.push(count);
      setTimeout(() => {
        ++count;
      }, this.delay);
  };
}

【讨论】：

感谢您提供此更新/解决方案。这也是一个选项，但我不想使用延迟。