仅使用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 })) 
    ]) 
] 

动画代码