解决方法
我不确定我是否同意Günter的ng-conf功能是最新的RC.3或RC.4版本中的问题.一个错开的功能将是非常好的,但目前看起来不像RC.5.它肯定会出现在Angular 2 Final版本中,你可以在这个动画中看到跟踪
ticket.尽管如此,虽然我确实为我的应用程序创建了一个解决方法,但我愿意分享.可能有一种更简单的方法,但这有效：
@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 });
}
}
就像我说的可能不是最简单的方式,但它对我有用.希望它能帮到你！
