Angular 2 Animationen: pro Element Übergangszeit

Question

Nehmen Sie den folgenden Fall: Ich habe eine Liste von Elementen mit einer * ngFor-Schleife erstellt. Ich möchte sie nacheinander einzeln erscheinen (im Gegensatz zu allen von ihnen als einer) unter Verwendung einer Animation

<div *ngFor="let item of items" [@flyInOut]="'in'"> 

Aber wenn ich dann schaffen die Animation, (die Leere Zustand des Primärzustand jeder Verwendung von diese div), sie alle erben vom selben Anfangs-/Endzustand. Daher werden sie alle als eins anstatt nacheinander erscheinen.

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

Ich wünsche der Lage sein, um eine Verzögerung zu geben, wie wir es animation delay mit tun können Und diese Verzögerung mit der ngFor Schleife angegeben werden, aber ich hatte kein Glück mit damit es funktioniert. Da ich nur eine begrenzte Anzahl von Instanzen habe, dachte ich daran, den Trigger hart zu codieren (zum Beispiel flyInOut1, flyInOut1, ...), aber das ist wirklich eine schlechte Übung.

Eine bessere Lösung?

Answer 1

Okay Stagger-Animationen werden jetzt in Angular 4 unterstützt und sind Teil der neuen "Abfrage" -Funktion.

transition('* => *', [ // each time the binding value changes 
    query(':leave', [ 
     stagger(100, [ 
     animate('0.5s', style({ opacity: 0 })) 
     ]) 
    ]), 
    query(':enter', [ 
     style({ opacity: 0 }), 
     stagger(100, [ 
     animate('0.5s', style({ opacity: 1 })) 
     ]) 
    ]) 
    ]) 

Official documentation

Nice tutorial here