webentwicklung-frage-antwort-db.com.de

Angular 2 animieren Sie * ngFür ein Listenelement nacheinander mit der neuen Animation-Unterstützung in RC 5

Ich habe eine Komponente, die eine Liste der Elemente vom Server abruft und diese Liste dann mit * ngFor in der Vorlage anzeigt.

Ich möchte, dass die Liste mit einigen Animationen angezeigt wird, aber eine nach der anderen. Ich meine, jedes Listenelement sollte nach dem anderen animiert werden.

Ich versuche so etwas:

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

und in meiner Listenkomponentenvorlage verwende ich es wie:

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

Was es macht, zeigt die gesamte Liste auf einmal. Ich möchte, dass Elemente einzeln mit einer Animation eingegeben werden.

19
Naveed Ahmed

Ich konnte stagger keine Unterstützung für ngFor in der Dokumentation finden, aber es gibt jetzt animation.doneevents, mit dem staggering ngFor erstellt werden kann.

siehe @ 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)'})),
    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);
  }
}
14
Ankit Singh

Um die angle2-Animationen zu verwenden, stelle ich eine Staatseigenschaft auf das iterierte Element ein und richte dann eine Umschaltfunktion für die Mouseover- und Mouseout-Funktionen ein. Auf diese Weise ist jedes Element gekapselt, es ist animiert und ich kann es nach Bedarf ändern

<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>
1
jredd

was Sie von der Zeit zwischen den einzelnen Elementen in der Liste wünschen, finden Sie in diesem Code. Ändern Sie die Datei .css in .scss

so https://codepen.io/jhenriquez856/pen/baPagq

$total-items: 5;

body {
  font-family: sans-serif;
  background: #111;
  color: #fff;
}

ul {
  width: 300px;
  left: 50%;
  margin-top: 25px;
  margin-left: -150px;
  
  position: absolute;
}

li {
  position: relative;
  display: block;
  border: 1px solid hotpink;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  animation: fadeIn 0.5s linear;
  animation-fill-mode: both;
}

// Set delay per List Item
@for $i from 1 through $total-items {
  li:nth-child(#{$i}) {
    animation-delay: .25s * $i;
  }
}

// Keyframe animation
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>