Angular 2 Staggering动画

Angular 2 RC2刚出来,我想知道它是否已经支持* ngFor的交错动画? DSL语言文档提到了组和序列但没有任何错开?

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

解决方法

我不确定我是否同意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 });
    }
}

就像我说的可能不是最简单的方式,但它对我有用.希望它能帮到你!

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...