angular - الزاوي 2 المتحركة*نغفور قائمة البند واحدا تلو الآخر باستخدام دعم الرسوم المتحركة الجديدة في أرسي 5




typescript angular2-template (2)

لدي عنصر الذي يجلب قائمة العناصر من الخادم ثم عرض تلك القائمة باستخدام * نغفور في القالب.

أريد أن يتم عرض القائمة مع بعض الرسوم المتحركة، ولكن واحدة بعد أخرى. أعني كل عنصر قائمة يجب أن تتحرك في بعد أخرى.

أنا أحاول شيئا من هذا القبيل:

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>

ما يفعله هو يعرض قائمة كاملة في آن واحد. أريد عناصر للدخول واحدا تلو الآخر مع بعض الرسوم المتحركة.


لاستخدام الرسوم المتحركة angular2 تعيين ممتلكات الدولة إلى البند إيتيراتد وثم مجرد إعداد وظيفة تبديل وظائف تمرير الماوس و ماوسوت. بهذه الطريقة كل عنصر مغلفة انها الدولة المتحركة ثم يمكنني تغييره حسب الحاجة

<li
   *ngFor="let item of itemsList"
   (mouseover)="toogleAnimation(item)"
   (mouseout)="toogleAnimation(item)"
>{{ item.name }}
  <div class="animation_wrapper" [@slideInOut]="item.state">
    <span class="glyphicon glyphicon-refresh"></span>
    <span class="glyphicon glyphicon-trash"></span>
  </div>
</li>

لم أتمكن من العثور على دعم stagger على ngFor في الوثائق، ولكن هناك الآن events staggering ngFor ، والتي يمكن استخدامها لجعل staggering ngFor

رؤية @ الضارب

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