微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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()?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐