Angolare 2 animato * ngPer l'elemento dell'elenco uno dopo l'altro utilizzando il nuovo supporto di animazione in RC 5

Question

Ho un componente che recupera l'elenco degli elementi dal server e quindi visualizza tale elenco utilizzando * ngFor nel modello.

Desidero visualizzare la lista con alcune animazioni, una dopo l'altra. Voglio dire che ogni elemento della lista dovrebbe animarsi dopo l'altro.

Sto provando qualcosa di simile:

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

e nel mio modello di componente lista Io lo utilizzo come:

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

Ciò che fa è visualizza la lista completa in una sola volta. Voglio che gli oggetti entrino uno per uno con qualche animazione.

Answer 1

non riuscivo a trovare stagger supporto ngFor nella documentazione, ma ora c'è animation.doneevents, che può essere usato per fare 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

Per utilizzare il animazioni angular2 Ho impostato una proprietà di stato sull'elemento iterato e quindi ho appena impostato una funzione di commutazione per il mouseover e m Funzioni di ouseout. In questo modo ogni oggetto incapsulato è stato animato e poi mi potrebbe cambiare in base alle esigenze

<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

ciò che si vuole, il tempo tra ogni elemento della lista, vedere questo codice. modificare il file css per .scss

come questo stesso comportamento 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>