Only first new item is animated after adding to list

Question

So my issue is that I'm using cdkVirtualFor add I want animate new item after it is added to list. Unfortunately the list is animated only initially and after first element is added, after that new items just appear without animation.

Stackblitz with example: https://stackblitz.com/edit/angular-cdc2ne

Component code:

import { FixedSizeVirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
import { ChangeDetectionStrategy, Component, ChangeDetectorRef } from '@angular/core';
import { trigger, transition, style, animate, query, stagger, animateChild } from "@angular/animations";

export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
  constructor() {
    super(50, 0, 0);
  }
}

/** @title Virtual scroll with a custom strategy */
@Component({
  selector: 'cdk-virtual-scroll-custom-strategy-example',
  styleUrls: ['cdk-virtual-scroll-custom-strategy-example.css'],
  templateUrl: 'cdk-virtual-scroll-custom-strategy-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [{ provide: VIRTUAL_SCROLL_STRATEGY, useClass: CustomVirtualScrollStrategy }],
  animations: [
    trigger('items', [
      transition(':enter', [
        style({ transform: 'scale(0.5)', opacity: 0 }),  // initial
        animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)', 
          style({ transform: 'scale(1)', opacity: 1 }))  // final
      ])
    ]),
  ]
})
export class CdkVirtualScrollCustomStrategyExample {

  constructor(private cdRef: ChangeDetectorRef) { }
  items = Array.from({ length: 15 }).map((_, i) => `Item #${i}`);
  delete(i: number) {
    this.items = this.items.filter((a, index) => index !== i);
  }
  add() {
    this.items = ['Item #' + this.items.length, ...this.items];
    this.cdRef.detectChanges();

  }
}

View:

    <cdk-virtual-scroll-viewport class="example-viewport">
  <div @items *cdkVirtualFor="let item of items; let i=index" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
{{items.length | json}}
<button (click)="add()">ADD</button>

@Edit,

Ok, actually I fixed my first issue.

https://stackblitz.com/edit/angular-36sqcf

But now I see that if new elements are added quite fast, only the last element is properly animated. How can I animate all elements?

Only first new item is animated after adding to list

0 Answers0