ngFor生成的Angular 2动画元素 [英] Angular 2 animate element generated by ngFor

问题描述

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

I am new to animations in Angular 2 so I might be missing something obvious, but how do I animate elements generated by an *ngFor loop? It seems like the animations are tied to a component and have to be defined in the @Component decorator?

是创建内部组件并创建该组件的唯一解决方案在* ngFor中进行动画处理？

Is the only solution to create a inner component and have that being created in the *ngFor and then animate that?

推荐答案

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

Here is an example of a fade-in animation for elements generated in a *ngFor loop.

my.component.ts

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

my-component.html

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

NB：如果要使用具有特定状态的动画，则应像这样绑定状态：

NB: If you want to use an animation with a specific state, you should bind the state like this:

[@myAnimation]="'myState'"

这篇关于ngFor生成的Angular 2动画元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！