Comment puis-je animer *ngFor Angulaire?

J'ai besoin d'animer un ngFor liste car elle est peuplée et montré. Chaque élément doit avoir une transition, disons quelque chose comme ceci.

Comment puis-je le faire?

OriginalL'auteur Nicu | 2016-05-13

  1. 12

    Il a quelques problèmes, car ngFor fait un peu redondant ajout/supprime ce qui cause des éléments animés qui ne fallait pas:

    import {Component} from 'angular2/core';
import { Component, Directive, OnDestroy, Input } from 'angular2/core';
@Component({
selector: 'my-app',
template: `<div (click)="$event.preventDefault()">
<button type="button" (click)="pushItem()">Push</button>
<button type="button" (click)="removeItemLast()">Remove Last</button><br/>
<button type="button" (click)="unshiftItem()">Unshift</button>
<button type="button" (click)="removeItemFirst()">Remove First</button><br/>
<ul>
<li class="my-animation" *ngFor="#item of items">
{{item.title}}
</li>
</ul>
</div>`
})
export class AppComponent {
private count:number = 1;
public items: Array<any>;
constructor() { 
console.clear(); 
this.items = [];
this.items.push(this.newItem());
this.items.push(this.newItem());
}
pushItem() {
this.items.push(this.newItem());
},
removeItemLast() {
if(this.items.length > 0) this.items.splice(this.items.length - 1, 1);
},
unshiftItem() {
this.items.unshift(this.newItem());
},
removeItemFirst() {
if(this.items.length > 0) this.items.splice(0, 1);
},
newItem() {
return {title: 'Item' + this.count++};
}
}
    @keyframes MyAnimation {
0% {
padding-left: 100px;
}
100% {
padding-left: 0px;
} 
}
.my-animation {
animation: MyAnimation 1s;
}

    Plunker exemple (RC.x) de https://github.com/angular/angular/issues/7239 montre le problème.

    Mise à jour

    Cela a été corrigé il y a longtemps

    de travail Plunker exemple (2.4.x)

    Comment voulez-vous faire cela sans la mutation de la matrice, par exemple, comment voulez-vous animez des insertions ou des mises à jour avec une Observable<Array<ItemModel>>
    J'ai créé un nouveau Plunker plnkr.co/modifier/TMZKPbuzorVt9UsGJ2Nr?p=preview
    Vous pouvez voir clairement le problème ici: plnkr.co/modifier/Xz48XN?p=preview lorsque vous cliquez sur "swap" Tous les éléments qui est l'indice a changé, c'est de nouveau ajouté au dom, peu importe le " trackBy clause de
    il semble toujours y avoir un bug dans le IterableDiffer lorsque plus d'un élément de changements à la fois. Supprimer d'abord, plus tard, ajouter ne cause pas tous en entre les pour obtenir enlevé et rajouté plnkr.co/modifier/ky0sU4EV5NfXLTCkxC2d?p=preview (ajouté plus tard est encore animé même si, à juste titre, dans cette configuration)
    Oui, c'est ce que j'essaie de montrer. Il semble fonctionner correctement si vous utilisez @angular/animations au lieu de cela, de sorte que c'est probablement la voie à suivre. Les animations de l'api web est beaucoup plus facile que les css pour ce genre d'animation complexes DOM interaction, de toute façon. (même lors de son utilisation directement)

    OriginalL'auteur Günter Zöchbauer

  2. 6

    Il est maintenant le guide Angulaire du système d'animation. Cette aide si nous voulons faire les choses de fantaisie, comme seulement faire de l'animation pour les éléments qui ont été ajoutés après que le composant a initialisé, pas ceux qui sont déjà présents. J'ai modifié la réponse précédente pour faire l'angle de 2 voies.

    Plunker: http://plnkr.co/edit/NAs05FiAVTlUjDOZfEsF?p=preview

    import {
Component,
trigger, transition, animate, style, state
} from '@angular/core';
@Component({
selector : 'my-app',
animations: [
trigger('growShrinkStaticStart', [
state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
transition('* => void', [
style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }),
animate("0.5s ease", style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }))
]),
transition('void => false', [
/*no transition on first load*/
]),
transition('void => *', [
style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }),
animate("0.5s ease", style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }))
])
])
],
template : `<div (click)="$event.preventDefault()">
<button type="button" (click)="pushItem()">Push</button>
<button type="button" (click)="removeItemLast()">Remove Last</button><br/>
<button type="button" (click)="unshiftItem()">Unshift</button>
<button type="button" (click)="removeItemFirst()">Remove First</button><br/>
<ul style="background: light-blue">
<li *ngFor="let item of items" 
[@growShrinkStaticStart]="animationInitialized.toString()" 
(@growShrinkStaticStart.done)="animationInitialized = true"
style="background-color:pink; border:1px dashed gray; overflow:hidden">
<h3>{{item.title}}</h3><p>{{item.description}}</p>
</li>
</ul>
<div>Footer</div>
</div>`
})
export class AppComponent
{
private count: number = 1;
public items: Array <{ title: string, description: string }> ;
private animationInitialized: boolean = false;
constructor() {
this.items = [];
this.items.push(this.newItem());
this.items.push(this.newItem());
}
pushItem() {
this.items.push(this.newItem());
}
removeItemLast() {
if (this.items.length > 0)
this.items.splice(this.items.length - 1, 1);
}
unshiftItem() {
this.items.unshift(this.newItem());
}
removeItemFirst() {
if (this.items.length > 0)
this.items.splice(0, 1);
}
newItem() {
let d: string = "";
let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ    abcdefghijklmnopqrstuvwxyz0123456789 . ! ? ";
for (let i = 0; i < Math.floor(Math.random() * 50000); i++)
d += possible.charAt(Math.floor(Math.random() * possible.length));
return { title : 'Item' + this.count++, description: d };
}
}
    Est-il possible d'obtenir le même effet de transition à transition personnalisée stateChangeExpression - autres que void => * (:entry) / * => void (:leave) pour *ngFor? Par exemple définir transition('in => out',... et transition('out => in',... et dans l'utilisation du modèle [@growShrinkStaticStart]="transition" avec la liaison à transition variable dans la classe de composant?. Je demande parce que *ngFor fait DOM l'ajout et la suppression et j'ai pas réussi à obtenir qu'avec des transitions personnalisées.
    Salut, je suis en utilisant :quitter et si je vais revenir et de les actualiser et de les assigner à un appel d'api le résultat toujours déclenche l'animation. Est-il possible de n'afficher que l'animation lors de la suppression d'un élément?

    OriginalL'auteur Stephen