Ich habe eine Komponente, die eine Liste von Elementen vom Server abruft und diese Liste dann mit * ngFor in der Vorlage anzeigt.Angular 2 animieren * ngFür Listenelemente nacheinander neue Animationsunterstützung in RC verwenden 5
Ich möchte die Liste mit einigen Animationen, aber nacheinander angezeigt werden. Ich meine, jeder Listeneintrag sollte nach dem anderen animieren.
ich so etwas wie dies versuche:
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;
}
und in meiner Liste Komponentenvorlage Ich mag es bin mit:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
Was sie tut, zeigt ganze Liste auf einmal ist. Ich möchte, dass Elemente nacheinander mit einer Animation eingegeben werden.
Exakt gleiche Verhalten für mich erwartet! Hast du eine Lösung gefunden? –
Noch nicht, aber es scheint, dass mit dem neuen Animationsmodul in Angular 2 es jetzt nicht viel schwieriger sein sollte. Wir können eine Komponente für das Listenelement erstellen und dann die Animation für "Eingeben" und "Verlassen" anhängen. Überprüfen Sie https://angular.io/docs/ts/latest/guide/animations.html –
Ich habe gesehen, danke! Meine Lösung war, ein Timeout zwischen jedem Element für die Animation zu setzen, so dass alle LI-Elemente reibungslos mit einer Animation eingehen –