由ngFor生成的Angular 2 animate元素

Question

我不熟悉Angular 2中的动画，所以我可能会遗漏一些明显的动画，但是如何为* ngFor循环生成的元素设置动画？似乎动画与组件绑定，必须在@Component装饰器中定义？

是唯一的解决方案来创建一个内部组件，并在* ngFor中创建，然后动画那个？

Answer 1

以下是*ngFor循环中生成的元素的淡入动画示例。

my.component.ts

@Component({
  selector: ...,
  templateUrl: 'my-component.html',
  styleUrls: ...,
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: '0' }),
        animate('.5s ease-out', style({ opacity: '1' })),
      ]),
    ]),
  ],
})

我-component.html

<div *ngFor="let item of myArray" @fadeIn>I'm an Item</div>

注意：如果你想使用具有特定状态的动画，你应该像这样绑定状态：

[@myAnimation]="'myState'"