ngFor 生成的 Angular 2 动画元素

Question

我是 Angular 2 动画的新手，所以我可能遗漏了一些明显的东西，但我如何为 *ngFor 循环生成的元素设置动画？似乎动画与组件相关联并且必须在 @Component 装饰器中定义？

是创建内部组件并在 *ngFor 中创建该组件然后为其设置动画的唯一解决方案吗？

Answer 1

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

我的组件.ts

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

我的组件.html

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

注意:如果你想使用特定状态的动画，你应该像这样绑定(bind)状态:

[@myAnimation]="'myState'"