僅使用Angular動畫對列表中的新項目添加動畫？

Question

在角度則可以錯開動畫，因爲我在這裏做，例如：

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

我不斷添加新項目上的需求列表，用戶點擊「顯示更多照片」按鈕實例。但是這會重新觸發所有照片上的動畫，我如何才能使列表的一部分錯開？

編輯：我有兩個不同的半解決方案，

1）第一張照片瞬間加載，隨後的照片加載與交錯：

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）另一種選擇重新動畫所有當新的被添加到列表中的照片：

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 } 
     ) 
     ]) 
    ]) 
    ] 

無論這些半的解決方案完全滿足我的願望在第一列表都錯開，並添加動畫到名單。

Answer 1

我碰到過這個。因爲你不能綁定到動畫中的變量。 我最終將我的新結果加載到數組塊中，並將該塊推送到一個數組中。然後將ngFor包裝在另一個ngFor中，它遍歷數組的塊。

下面是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> 

這裏是我的名單

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

動畫代碼