Angular 2 Потрясающая анимация

Я не уверен, согласен ли я с Гюнтером в том, что функции ng-conf есть в новейшей версии RC.3 или, если уж на то пошло, в версии RC.4. Функция смещения была бы отличной, но на данный момент это не похоже на то, что она запланирована для RC.5. Это определенно будет в выпуске Angular 2 Final, как вы можете видеть на этом тикете отслеживания анимации. С учетом сказанного, хотя я создал обходной путь для своего приложения, которым я хотел бы поделиться. Может быть более простой подход, но это работает:

@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 });
    }
}

Как я уже сказал, может быть, не самый простой способ, но он работает для меня. Надеюсь, это поможет вам!

* ПОМОЩНИК: Какая версия JavaScript сна()?

Они работают над этим, как мы видим здесь: https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s

Но я думаю он еще не вышел... Надо еще немного подождать :-(

Здесь есть примеры, которые мы видим на видео... но я не знаю, стабильная ли это версия... на свой страх и риск https://github.com/matsko/ng-conf-demos