Angular 2动画* ng对于列表项目一个接一个，使用RC 5中的新动画支持 [英] Angular 2 animate *ngFor list item one after other using new Animation support in RC 5

问题描述

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

I have a component that fetches list of items from server and then display that list using *ngFor in template.

我希望列表显示一些动画，但要一个接一个地显示.我的意思是每个列表项都应设置动画.

I want the list to be displayed with some animation, but one after other. I mean each list item should animate in after other.

我正在尝试这样的事情:

I am trying something like this:

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;
}

在我的列表组件模板中，我使用它的方式是

and in my list component template I am using it like:

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

它的作用是一次显示整个列表.我希望物品以某种动画的形式一一输入.

What it does is displays whole list at once. I want items to enter one by one with some animation.

推荐答案

我在文档中找不到对ngFor的stagger支持，但是 现在有animation.done events ，可用于制作 staggering ngFor

I couldn't find stagger support on ngFor in the documentation, but there's now animation.done events, which can be used to make staggering ngFor

StackBlitz

@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)'})),
    transition('void => *', [
      animate(300, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))
    ]),
    transition('* => void', [
      animate(300, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        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);
  }
}

这篇关于Angular 2动画* ng对于列表项目一个接一个，使用RC 5中的新动画支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！