ngFor 生成的 Angular 2 动画元素答案

【问题标题】：Angular 2 animate element generated by ngForngFor 生成的 Angular 2 动画元素
【发布时间】：2017-08-15 06:08:34
【问题描述】：

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

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

【问题讨论】：

标签： angular animation

【解决方案1】：

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

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

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

【讨论】：

把state('in', style...)放在那里有什么用？没有它也可以工作。
这是个好问题！我复制了大部分内容:)

【解决方案2】：

以下是在*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' })),
      ]),
    ]),
  ],
})

我的组件.html

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

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

[@myAnimation]="'myState'"

【讨论】：

这真的让我在理解“状态”以及如何使用 [@TriggerName] 语法将状态绑定到属性方面走上了正确的道路。
你不需要方括号，它也适用于@fadeIn
@UdiMazor 确实，动画状态不是强制性的，因此不需要数据绑定及其[]。相应地更新了答案。
不使用方括号有什么注意事项吗？我试图实现你上面的确切示例，如果我将@fadeIn 属性绑定到类属性，它只会对我有用。
也许我做错了什么，但如果项目是动态添加的，它会重新激活整个列表。如何只为新添加的元素设置动画？