change - Angular 2 animate*ngPara el elemento de la lista uno tras otro con el nuevo soporte de animación en RC 5

dynamic title angular 5

Question

Tengo un componente que obtiene la lista de elementos del servidor y luego muestra esa lista usando * ngPara la plantilla.

Quiero que la lista se muestre con algunas animaciones, pero una tras otra. Quiero decir que cada elemento de la lista debe animarse después de otro.

Estoy intentando algo como esto:

import { Component, Input, trigger, state, animate, transition, style } from ''@angular/core'';

@Component({
    selector: ''list-item'',
    template: ` <li  @flyInOut="''in''">{{item}}</li>`,
    animations: [
        trigger(''flyInOut'', [
            state(''in'', style({ transform: ''translateX(0)'' })),
            transition(''void => *'', [
                style({ transform: ''translateX(-100%)'' }),
                animate(100)
            ]),
            transition(''* => void'', [
                animate(100, style({ transform: ''translateX(100%)'' }))
            ])
        ])
    ]
})
export class ListItemComponent {
    @Input() item: any;
}

y en mi plantilla de lista de componentes lo estoy usando como:

<ul>
    <li *ngFor="let item of list;">
     <list-item [item]="item"></list-item>
    </li>
</ul>

Lo que hace es mostrar toda la lista a la vez. Quiero que los elementos ingresen uno por uno con algo de animación.

Answer 1

Para usar las animaciones angular2, establezco una propiedad de estado para el elemento iterado y luego simplemente configuro una función de alternancia para las funciones mouseover y mouseout. De esta forma, cada elemento encapsuló su estado animado y luego podría cambiarlo según sea necesario

<li
   *ngFor="let item of itemsList"
   (mouseover)="toogleAnimation(item)"
   (mouseout)="toogleAnimation(item)"
>{{ item.name }}
  <div class="animation_wrapper" [@slideInOut]="item.state">
    <span class="glyphicon glyphicon-refresh"></span>
    <span class="glyphicon glyphicon-trash"></span>
  </div>
</li>

Answer 2

No pude encontrar soporte stagger en ngFor en la documentación, pero ahora hay events animation.done , que se pueden usar para staggering ngFor

ver @ PLUNKER

@Component({
  selector: ''my-app'',
  template: `
    <ul>
    <li *ngFor="let hero of staggeringHeroes; let i = index"
        (@flyInOut.done)="doNext()"
        [@flyInOut]="''in''" (click)="removeMe(i)">
      {{hero}}
    </li>
  </ul>
  `,
  animations: [
  trigger(''flyInOut'', [
    state(''in'', style({transform: ''translateX(0)''})),
    transition(''void => *'', [
      animate(300, keyframes([
        style({opacity: 0, transform: ''translateX(-100%)'', offset: 0}),
        style({opacity: 1, transform: ''translateX(15px)'',  offset: 0.3}),
        style({opacity: 1, transform: ''translateX(0)'',     offset: 1.0})
      ]))
    ]),
    transition(''* => void'', [
      animate(300, keyframes([
        style({opacity: 1, transform: ''translateX(0)'',     offset: 0}),
        style({opacity: 1, transform: ''translateX(-15px)'', offset: 0.7}),
        style({opacity: 0, transform: ''translateX(100%)'',  offset: 1.0})
      ]))
    ])
  ])
]
})
export class App {
  heroes: any[] = [''Alpha'', ''Bravo'', ''Charlie'', ''Delta'', ''Echo'', ''Foxtrot'', ''Golf'', ''Hotel'', ''India''];

  next: number = 0;
  staggeringHeroes: any[] = [];

  constructor(){
    this.doNext();
  }

  doNext() {
    if(this.next < this.heroes.length) {
      this.staggeringHeroes.push(this.heroes[this.next++]);
    }
  }

  removeMe(i) {
    this.staggeringHeroes.splice(i, 1);
  }
}