Angular 2为ngFor生成的元素设置动画

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

---

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

这里是在

*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>

---

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

@组件({
选择器：。。。，
templateUrl:'my component.html'，
样式URL:。。。，
动画：[
触发器（'inOutAnimation'[
状态（'in'，样式（{opacity:1}）），
过渡（':enter'，[style（{opacity:'0'}），animate（'.5s ease out'，style（{opacity:'1'}））]，
过渡（':leave'，[style（{opacity:'1'}），animate（'.5s ease out'，style（{opacity:'0'}））]，
]),
],
})

这确实让我正确理解了“状态”以及如何使用[@TriggerName]语法将状态绑定到属性。您不需要方括号，它也可以用于@fadeIn@UdiMazor确实，动画状态不是强制性的，因此不需要数据绑定及其

[]

。相应地更新了答案。是否有一些不使用方括号的警告？我尝试实现上面的确切示例，只有将@fadeIn属性绑定到class属性时，它才会对我有效。也许我做错了什么，但如果动态添加项，它将重新激活整个列表。如何仅为新添加的元素设置动画？将

状态（'in'，style…）

放在那里有什么用？没有这个也行。

[@myAnimation]="'myState'"