Animation stupéfiante sur les nouveaux éléments d'une liste en utilisant des animations angulaires?

Question

Dans angulaire, vous pouvez échelonner les animations, comme je le fais ici par exemple:

<div 
    masonryLayout 
    [masonryOptions]="masonryOptions" 
    [input]="photos" 
    class="grid" 
    [@photosAnimation]="photos.length" 
    > 
    <img 
     *ngFor="let photo of photos; let i = index" 
     (click)="onPhotoClick(photo)" 
     src="{{photo.photo.medium}}" 
     class="grid-item clickable hover-outline" 
     [ngClass]="[photo.addedToCart ? 'in-cart-icon':'']" 
     alt="{{photo.motive}}" 
    /> 
</div> 

Je suis constamment ajouter de nouveaux éléments à la liste à la demande, que l'utilisateur clique sur le bouton « Afficher plus de photos » pour exemple. Mais cela redéclenche l'animation sur toutes les photos, comment est-ce que j'analyse seulement un sous-ensemble de la liste?

EDIT: J'ai deux différentes demi-solutions,

1) Les premières photos se chargent instantanément, les photos suivantes charge avec le décalage:

animations: [ 
    trigger('photosAnimation', [ 
     transition('* => *', [ 
     query(
      ':enter', 
      style({ opacity: 0, transform: 'translateY(-20%)' }), 
      { optional: true } 
     ), 
     query(
      ':enter', 
      stagger('100ms', [ 
      animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })) 
      ]), 
      { optional: true } 
     ) 
     ]) 
    ]) 
    ] 

2) L'autre option re-animez toutes les photos lorsque de nouveaux sont ajoutés à la liste:

animations: [ 
    trigger('photosAnimation', [ 
     transition('* => *', [ 
     query(
      '*', 
      style({ opacity: 0, transform: 'translateY(-20%)' }), 
      { optional: true } 
     ), 
     query(
      '*', 
      stagger('100ms', [ 
      animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })) 
      ]), 
      { optional: true } 
     ) 
     ]) 
    ]) 
    ] 

Aucune de ces demi-solutions satisfaire complètement mon souhait à la fois titubant dans la première liste et animer des acquisitions à la liste.

Answer 1

J'ai rencontré cela. Puisque vous ne pouvez pas lier à une variable dans les animations. J'ai fini par charger mes nouveaux résultats dans des blocs de tableaux et de pousser ce morceau dans un tableau. Puis enveloppant le ngFor dans un autre ngFor qui itère sur les morceaux de tableaux.

Voici le code HTML

<div *ngFor="let chunk of S.pictureChunks [@listAnimation]="S.pictureChunks.length"> 
    <div *ngFor="let picture of chunk"> 
    <img [@childAnimation]="S.pictureChunks.length" [src]='picture'> 
    </div> 

Voici mon code Animer liste

trigger('listAnimation', [ 
    transition('* => *', [ 
    query('@childAnimation', stagger(50, [ 
     animateChild() 
    ]), { optional: true }) 
    ]) 
]), 
trigger('childAnimation', [ 
    transition(':enter', [ 
    style({ opacity: 0 }), 
    animate(300, style({ opacity: 1 })) 
    ]) 
]