Angular 2 Staggering动画

我不确定我是否同意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 });
    }
}

就像我说的可能不是最简单的方式,但它对我有用.希望它能帮到你！

* HELPER：What is the JavaScript version of sleep()?