angular - Angular 2 驚異的なアニメーション

Question

Angular 2 RC2 が出てきたばかりですが、すでにずらしたアニメーションをサポートしているかどうか疑問に思っています*ngFor。DSL言語のドキュメントには言及されていますgroupがsequence、どんな種類のよろめきもありませんか?

ずらしアニメーションは RC2 に含まれていませんか?

Answer 1

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

私が言ったように、おそらく最も単純な方法ではないかもしれませんが、それは私にとってはうまくいきます。それがあなたを助けることを願っています!

*HELPER: sleep() の JavaScript バージョンは何ですか?