Soy nuevo en animaciones en Angular 2, por lo que es posible que me esté perdiendo algo obvio, pero ¿cómo animo elementos generados por un bucle * ngFor? Parece que las animaciones están vinculadas a un componente y deben definirse en el decorador @Component.
¿La única solución es crear un componente interno y hacer que se cree en * ngFor y luego animarlo?
Este es un ejemplo de una animación de aparición gradual para elementos generados en un bucle *ngFor .
mi.componente.ts
@Component({ selector: ..., templateUrl: 'my-component.html', styleUrls: ..., animations: [ trigger('fadeIn', [ transition(':enter', [ style({ opacity: '0' }), animate('.5s ease-out', style({ opacity: '1' })), ]), ]), ], })mi-componente.html
<div *ngFor="let item of myArray" @fadeIn>I'm an Item</div>NB: si desea utilizar una animación con un estado específico, debe vincular el estado de esta manera:
[@myAnimation]="'myState'"Aquí hay un ejemplo de animación de aparición y desaparición gradual basada en la respuesta de Ploppy.
@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'">