Angular-如何为带有交错的组件列表设置动画

Question

您如何使用交错动画为元件列表设置动画？我还添加了一个工作版本，没有列出组件，这可以正常工作。

正如我所说的，我想使用组件代替“呈现”页面中的组件

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>

Answer 1

我也为类似的问题而苦恼。在尝试使用交错效果几个小时之后，我的解决方案是延迟使用setTimeout（）将组件添加到数组中，而不是使用交错动画。

所以您的示例可能看起来像：

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