Non sono sicuro che sono d'accordo con Günter che il ng- le caratteristiche di conf sono nel nuovissimo RC.3 o, per quella materia, nella versione RC.4. Una funzione scaglionata sarebbe excelle nt ma a partire da quella corrente non sembra che sia previsto per RC.5. Sarà sicuramente nella versione Angular 2 Final
come puoi vedere su questo monitoraggio delle animazioni ticket. Detto questo, ho creato una soluzione alternativa per la mia applicazione che sarei disposto a condividere. Ci potrebbe essere un approccio più facile, ma questo funziona:
@Component({
selector: 'child',
templateUrl: `<div @fadeIn="state">This is my content</div>`,
animations: [
trigger('fadeIn', [
state('inactive', style({opacity:0})),
state('active', style({opacity:1)})),
transition('inactive => active', [
animate('500ms ease-in')
])
])
]
})
export class Child implements OnInit {
@Input() delay;
constructor() {
this.state = 'inactive';
}
ngOnInit() {
this.sleep(this.delay).then(() => {
this.state = 'active';
};
}
// HELPER*
sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
}
@Component({
selector: 'parent',
templateUrl: `
<div *ngFor="let child of children">
<child [delay]="child.delay"></child>
</div>
`
})
export class Child implements OnInit {
constructor() {
this.children = [];
this.children.push({ delay: 600 });
this.children.push({ delay: 1200 });
}
}
Come se non detto che forse il modo più semplice, ma funziona per me. Spero che ti aiuti!
* ASSISTENTE: What is the JavaScript version of sleep()?
un'occhiata a [QUESTO] (http://stackoverflow.com/a/40858203/5612697) –