Angular 2 animieren * ngFür Listenelemente nacheinander neue Animationsunterstützung in RC verwenden 5

Question

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

Ich möchte die Liste mit einigen Animationen, aber nacheinander angezeigt werden. Ich meine, jeder Listeneintrag sollte nach dem anderen animieren.

ich so etwas wie dies versuche:

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 Liste Komponentenvorlage Ich mag es bin mit:

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

Was sie tut, zeigt ganze Liste auf einmal ist. Ich möchte, dass Elemente nacheinander mit einer Animation eingegeben werden.

Answer 1

ich nicht stagger Unterstützung auf ngFor in der Dokumentation finden konnte, aber gibt es jetzt animation.doneevents, die verwendet werden können staggering 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)'})), 
    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); 
    } 
} 

Answer 2

nutzen zu können, die machen eckige2 Animationen Ich setze eine Zustandseigenschaft auf das iterierte Element und richte dann eine Umschaltfunktion für den mouseover und m ein ouseout funktioniert. Auf diese Weise jedes Element verkapselt ist es animierten Zustand und dann konnte ich es als

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> 

Answer 3

, was Sie wollen, von der Zeit zwischen jedem Element in der Liste, diesen Code sehen. ändern die Datei css .scss

wie diese 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>