Angular 2动画* ng对于在RC 5中使用新的动画支持,一个接一个的列表项

我有一个组件从服务器获取项目列表，然后使用* ngFor在模板中显示该列表。

我想要列表显示一些动画，但一个接一个。我的意思是每个列表项应该在其他动画之后。

我正在尝试这样的事情：

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

@Component({
    selector: 'list-item',template: ` <li  @flyInOut="'in'">{{item}}</li>`,animations: [
        trigger('flyInOut',[
            state('in',style({ transform: 'translateX(0)' })),transition('void => *',[
                style({ transform: 'translateX(-100%)' }),animate(100)
            ]),transition('* => void',[
                animate(100,style({ transform: 'translateX(100%)' }))
            ])
        ])
    ]
})
export class ListItemComponent {
    @Input() item: any;
}

在我的列表组件模板我使用它像：

<ul>
    <li *ngFor="let item of list;">
     <list-item [item]="item"></list-item>
    </li>
</ul>

它的作用是一次显示整个列表。我想要一些项目进入一些动画。

在文档中，我无法在ngFor上找到错误的支持，但是
现在有一个animation.done事件，可以用来令人惊叹的ngFor

see@PLUNKER

@Component({
  selector: 'my-app',template: `
    <ul>
    <li *ngFor="let hero of staggeringHeroes; let i = index"
        (@flyInOut.done)="doNext()"
        [@flyInOut]="'in'" (click)="removeMe(i)">
      {{hero}}
    </li>
  </ul>
  `,animations: [
  trigger('flyInOut',[
    state('in',style({transform: 'translateX(0)'})),[
      animate(300,keyframes([
        style({opacity: 0,transform: 'translateX(-100%)',offset: 0}),style({opacity: 1,transform: 'translateX(15px)',offset: 0.3}),transform: 'translateX(0)',offset: 1.0})
      ]))
    ]),keyframes([
        style({opacity: 1,transform: 'translateX(-15px)',offset: 0.7}),style({opacity: 0,transform: 'translateX(100%)',offset: 1.0})
      ]))
    ])
  ])
]
})
export class App {
  heroes: any[] = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India'];

  next: number = 0;
  staggeringHeroes: any[] = [];

  constructor(){
    this.doNext();
  }

  doNext() {
    if(this.next < this.heroes.length) {
      this.staggeringHeroes.push(this.heroes[this.next++]);
    }
  }

  removeMe(i) {
    this.staggeringHeroes.splice(i,1);
  }
}

原文链接：https://www.f2er.com/angularjs/144244.html

Angular 2动画* ng对于在RC 5中使用新的动画支持,一个接一个的列表项

猜你在找的Angularjs相关文章