CODEWITHSUNDEEP
angularangular-animations
Sawri
Sawri

Reputation: 76

Staggering animation on just the new items of a list using Angular animations?

In angular you can stagger animations, as I'm doing here for instance:

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

I'm constantly adding new items to the list on demand, as the user clicks the "show more photos" button for instance. But this retriggers the animation on all the photos, how do I only stagger-animate a subset of the list?

EDIT: I've got two different semi-solutions,

1) The first photos instantly load, subsequent photos load with the stagger:

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) The other option re-animates all the photos when new ones are added to the list:

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

Neither of these semi-solutions completely satisfy my wish to both stagger in the first list and animate in additions to the list.

Upvotes: 0

Views: 802

Answers (1)

Josh Eastwood
Josh Eastwood

Reputation: 11

I ran into this. Since you cant bind to a variable in animations. I ended up loading my new results in chunks of arrays and pushing that chunk to an array. Then wrapping the ngFor in another ngFor that iterates over the chunks of arrays.

Here is the 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>

Here is my animate code for list

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

Upvotes: 1

Related Questions