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' })),
      ]),
    ]),
  ],
})

MY-component.html

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

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

[@myAnimation]="'myState'"

Answer 2

这是一个基于 Ploppys 答案的淡入和淡出动画示例。

<div *ngFor="let item of myArray" [@inOutAnimation]="'in'">

df = df.replace('?', "Null")

由ngFor生成的Angular 2 animate元素

2 个答案: