Angular 2 阶段性动画

Question

Angular 2 RC2刚刚发布，我想知道它是否已经支持*ngFor的分批动画？DSL语言文档提到了group和sequence，但没有任何一种形式的分批动画？RC2中不包括分批动画吗？

- sqwk

---

请查看此链接。 - Ankit Singh

Answer 1

我不确定是否同意Günter的说法，即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: 如何在JavaScript中实现sleep()函数？

- wootencl

---

好像已经发布了：https://angular.io/api/animations/stagger - sqwk

Answer 2

他们正在开发中，我们可以在这里看到： https://www.youtube.com/watch?v=Hr4IKlr9mhg&feature=youtu.be&t=10m50s 但我认为它还没有发布...我们需要再等一段时间 :-(

这里有视频中展示的示例...但我不知道这是否是稳定版本...自行承担风险 https://github.com/matsko/ng-conf-demos

- Taylor Lewis

---

在ng-conf展示的动画模块已经包含在Angular2 RC.3中。 - Günter Zöchbauer

抱歉打扰了。这个问题有任何更新吗？ stagger (ng-conf-demos) 仍然有效吗？如果无效，是否有可用的 plunker？ - Kevin Regenrek