在* ngFor内交错Angular2动画

我一直在挖掘Angular2文档,似乎没有一种简单的方法来为动画添加延迟.作为参考,这是我的目标： plunkr using jQuery

我想使用Angular2的动画功能,因为这些“条”是在循环中生成的.他们的动画效果很好,但是一下子.我想以1s为增量错开它们.这是我的主要组件文件：

import {
  Component,Input,trigger,state,style,transition,animate
} from '@angular/core';


export class Skill {
  skill: string;
  level: number;
}

const SKILLS: Skill[] = [
    { skill: 'x',level: 70 },{ skill: 'y',level: 100 },{ skill: 'z',level: 80 }
]

@Component({
  selector: 'app-wrap',template: `
    <div *ngFor="let skill of skills; let i = index" class="skill">
      <span class="bar" [style.width.%]="skill.level" [@expandSkill]>&nbsp;</span>
    </div>
  `,animations: [
    trigger('expandSkill',[
      state('in',style({ width: 'auto' })),transition('void => *',[
        style({ width: '0' }),animate('1000ms ease-in-out')
      ])
    ]
  ]
})

export class AppComponent {
  skills = SKILLS;
}

我遇到了这个看似相似的other SO question,但几个月前,在最终发布之前就被问过了.

解决方法

在对着动画DSL进行锤击之后,制作出惊人的动画.我找到了另一种做动画的方法,它可以让人惊愕！

诀窍是使用渲染器和服务来控制动画的指令来保存动画存储！

指令重要代码

this.animation = this.renderer.animate(
  this.element.nativeElement.firstElementChild || this.element.nativeElement,this.animservice.getAnimation(animationName).startingStyles,this.animservice.getAnimation(animationName).keyframes,this.duration,this.delay,this.easing
);
this.animation.pause();
this.animation.play();

如何在模板中使用它

<div *ngFor="let str of ['foo','bar','baz']; let i = index"
  anim-aes
  [anim-aes-delay]="i*200"
  [anim-aes-duration]="500"
  [anim-aes-animation]="'fadeIn'"
  [anim-aes-animation-leave]="'fadeOut'"
  [anim-aes-play]="show">
  click {{str}}
</div>

我用你需要的一切做了一个工作的plunkr！

plunkr