角度アニメーションを使用して、リストの新しい項目だけにアニメーションをずらしていますか？角度で

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> 

ユーザーがために、「より多くの写真を表示」ボタンをクリックすると、私は常に、必要に応じてリストに新しいアイテムを追加していますインスタンス。しかし、これはすべての写真のアニメーションを再トリガするだけで、どのようにリストのサブセットをずらしてアニメーション化するのですか？

編集：私は、2つの異なる半ソリューションを持っている、

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

のための私のアニメーションコードです