Angular 2 惊人的动画

Question

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

RC2中不包含交错动画吗？

Answer 1

我不确定我是否同意 Günter 的观点，即 ng-conf 功能是在最新的 RC.3 中还是在 RC.4 版本中。交错功能会非常好，但目前看起来不像是为 RC.5 设计的。它肯定会出现在 Angular 2 Final 版本中，您可以在这个动画跟踪中看到 ticket .话虽这么说，但我确实为我的应用程序创建了一个解决方法，我愿意分享。可能有更简单的方法，但这很有效:

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

就像我说的可能不是最简单的方法，但它对我有用。希望对你有帮助!

*帮助者:What is the JavaScript version of sleep()?