Angular 2 交错动画

Posted 2023-03-06

【中文标题】Angular 2 交错动画

【英文标题】：Angular 2 Staggering Animation

【发布时间】：2016-10-19 05:31:25

【问题描述】：

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

RC2 中不包含交错动画吗？

【问题讨论】：

看看THIS

【参考方案1】：

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

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

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

【讨论】：

ng-conf 演示的动画模块包含在 Angular2 RC.3 中

抱歉推送。但是这有什么更新吗？交错（ng-conf-demos）仍然有效吗？如果没有，是否有可用的 plunker？

【参考方案2】：

我不确定我是否同意 Günter 的观点，即 ng-conf 功能是在最新的 RC.3 中还是在 RC.4 版本中。交错功能会非常好，但目前看来它不像是为 RC.5 设计的。正如您在此动画跟踪ticket 中看到的那样，它肯定会在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 );
    

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

*助手：What is the javascript version of sleep()?

【讨论】：

貌似已经发布了：angular.io/api/animations/stagger