Angular 2惊人的动画 [英] Angular 2 Staggering Animation

问题描述

Angular 2 RC2刚问世，我想知道它是否已经支持 * ngFor 的交错动画？ DSL语言文档中提到了 group 和 sequence ，但是没有任何错位吗？

Angular 2 RC2 just came out and I am wondering whether it already supports staggered animations for *ngFor? The DSL language documentation mentions group and sequence but no stagger of any kind?

RC2中不包含交错动画吗？

Is staggered animation not included in RC2?

推荐答案

我不确定是否同意Günter的观点ng-conf功能位于最新的RC.3中或与此相关的RC.4版本中。交错功能会很出色，但从目前看来，RC.5并不适合它。绝对会在 Angular 2 Final 版本中，您可以在此动画跟踪中看到门票。话虽如此，尽管我确实为我的应用程序创建了一种解决方法，但我还是愿意分享。可能有一种更简单的方法，但这可行：

I'm not sure if I agree with Günter that the ng-conf features are in the newest RC.3 or for that matter in the RC.4 release. A stagger feature would be excellent but as of current that doesn't look like it's slated for RC.5. It will definitely be in the Angular 2 Final release as you can see on this animation tracking ticket. With that being said though I did create a workaround for my application I would be willing to share. There might be an easier approach but this works:

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

就像我说也许不是最简单的方法，但对我有用。希望对您有帮助！

Like I said maybe not the simplest way but it works for me. Hope it helps you!

* HELPER： W帽子是sleep（）的JavaScript版本吗？

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

这篇关于Angular 2惊人的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！