Angular 2 Staggering动画

Question

Angular 2 RC2刚出来,我想知道它是否已经支持交错的动画了*ngFor？在DSL语言文档中提到group和sequence,但没有任何一种交错？

是否交错动画不包括在RC2中？

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:sleep()的JavaScript版本是什么？

Answer 2

他们正在努力，我们可以在这里看到： https://www.youtube.com/watch?v =Hr4IKlr9mhg&feature=youtu.be&t=10m50s

但我认为它还没有发布......我们需要再等一下:-(

这是我们在视频中看到的示例...但我不知道这是否是稳定版本...风险自负 https://github.com/matsko/ng-conf-demos