Только первый новый элемент анимируется после добавления в список - PullRequest
Новая
       7

Только первый новый элемент анимируется после добавления в список

0 голосов
/ 20 декабря 2018

Так что моя проблема в том, что я использую cdkVirtualFor добавить. Я хочу анимировать новый элемент после его добавления в список.К сожалению, список анимируется только изначально и после добавления первого элемента, после этого новые элементы просто появляются без анимации.

Stackblitz с примером: https://stackblitz.com/edit/angular-cdc2ne

Код компонента: 

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();

  }
}

Вид: 

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

Хорошо, на самом деле я исправил свою первую проблему.

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

Но теперь я вижу, что, если новые элементы добавляются довольно быстро, только последний элемент должным образом анимируется.Как я могу оживить все элементы?

...