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?
Is the only solution to create a inner component and have that being created in the *ngFor and then animate that?
Here is an example of a fade-in animation for elements generated in a *ngFor loop.
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>
NB: If you want to use an animation with a specific state, you should bind the state like this:
[@myAnimation]="'myState'"
Here is an example of both fade-in and fade-out animation based on Ploppys answer.
@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'">