Angular 2：使用ngFor生成的元素动画

Question

我对Angular 2中的动画不熟悉，可能会忽略一些明显的问题，但是如何动画化由*ngFor循环生成的元素呢？似乎动画与组件相关，必须在@Component装饰器中定义？

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

- jhertz

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

我的组件.html

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

注意: 如果您想使用具有特定状态的动画，则应绑定该状态，例如：

[@myAnimation]="'myState'"

- Ploppy

---

这确实让我对理解“状态”以及如何使用[@TriggerName]语法将状态绑定到属性有了正确的方向。 - jhertz

您不需要使用方括号，@fadeIn也可以正常工作。 - Udi Mazor

@UdiMazor 没错，动画状态不是必需的，因此数据绑定及其 [] 也不是必须的。已相应地更新了答案。 - Ploppy

不使用方括号有什么需要注意的地方吗？我尝试实现你上面的确切示例，但只有在将@fadeIn属性绑定到类属性时才能正常工作。 - Bill Gardner

也许我做错了什么，但如果项目是动态添加的，它会重新启动整个列表。如何只对新添加的元素进行动画处理？ - Robouste

我之前做错了一些事情，每次都重新生成整个数组。现在的解决方案完美地运行了。 - Robouste

Answer 2

这是一个基于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'">

- Daniel Wallman

---

把state（'in'，style ...）放在那里有什么用？即使没有它也可以工作。 - Sahil Babbar

这是一个好问题！我复制了大部分内容 :) - Daniel Wallman