Stagger и Animation не применяются, когда используется наблюдаемый и в памяти.

Question

Angular 9, Пытаюсь пошатнуть элементы от ngFor. Проблема заключается в наблюдаемом, который возвращает массив объектов. Если я сделаю this.charts = Array.from{length: 7}), анимация stagger и animate будет работать без проблем.

Но если я сделаю this.charts = this.getChartDataService.getData();, то анимации нет вообще. Элементы отображаются успешно, но без анимации (нет постепенного увеличения или уменьшения непрозрачности).

<div class="chart-body" @listAnimation>
  <div *ngFor="let chart of charts | async" class="last-seven-days-body">
    <h1>foobar</h1>
  </div>
</div>

import { stagger, animate, trigger, transition, style, query, state } from '@angular/animations';

import {
  Component,
  OnInit,
  Renderer2,
  ElementRef,
  ViewEncapsulation,
} from '@angular/core';

import { GetChartDataService } from '../get-chart-data.service';

@Component({
  selector: 'app-last-seven-days-chart',
  templateUrl: './last-seven-days-chart.component.html',
  styleUrls: ['./last-seven-days-chart.component.css'],
  encapsulation: ViewEncapsulation.None,
  animations: [
    trigger('listAnimation', [
      transition('* => *', [ // each time the binding value changes
        query(':leave', [ 
          stagger(500, [
            animate('1s', style({ opacity: 0 }))
          ])
        ], {optional: true}),
        query(':enter', [
          style({ opacity: 0 }),
          stagger(500, [
            animate('1s', style({ opacity: 1 }))
          ])
        ], {optional: true})
      ])
    ])
  ],
})

export class LastSevenDaysChartComponent implements OnInit {
  public charts;

  constructor(
    private getChartDataService: GetChartDataService,
    private renderer: Renderer2,
    private el: ElementRef,
  ) {}

  staggerGraphs(): void {
    console.log(this.el.nativeElement);
    const chartElements = this.el.nativeElement.querySelectorAll('line-chart');
    chartElements.forEach((el) => el.classList.add('.show-chart'));
  }

  ngOnInit(): void {
    this.charts = this.getChartDataService.getData();
  }

}

get-chart-data.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class GetChartDataService {
  private chartDataUrl:string = 'api/curves';


  getData (): Observable<any> {
    return this.http.get(this.chartDataUrl);
  }

  constructor(private http: HttpClient) {}

}

in-memory-service. тс

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Curve } from './curve';
import { Timestamp } from './timestamp';
import * as moment from 'moment';

@Injectable()
export class InMemoryDataService  implements InMemoryDbService {
    timestamps1: Timestamp = {
      timeStamp: "12:00",
      glucoseLevel: 395
    };
    timestamps2: Timestamp = {
      timeStamp: "15:00",
      glucoseLevel: 200
    };
    timestamps3: Timestamp = {
      timeStamp: "16:30",
      glucoseLevel: 65
    };
    timestamps4: Timestamp = {
      timeStamp: "18:00",
      glucoseLevel: 300
    };
    timestamps5: Timestamp = {
      timeStamp: "23:00",
      glucoseLevel: 400
    };

    createCurve = (dayNumber: number): Curve => {
      return {
        date: moment().local().subtract(dayNumber, 'days').format('MM-DD-YYYY'),
        timestamps: [
          this.timestamps1,
          this.timestamps2,
          this.timestamps3,
          this.timestamps4,
          this.timestamps5,
        ]
      }
    }

  createDb() {
    const days: number[] = Array.from({length: 35}, (x, index) => index);
    const curves: Curve[] = days.map(dayNumber => this.createCurve(dayNumber));
    return { curves };
  }
}

Answer 1

Это может означать, что анимация началась до того, как вы получили эти данные из API.

Попробуйте дождаться таких данных:

<div class="chart-body" @listAnimation *ngIf="charts | async as list">
  <div *ngFor="let chart of list" class="last-seven-days-body">
    <h1>foobar</h1>
  </div>
</div>

Вы даже можете добавить индикатор загрузки во время ожидания.

Демоверсия Ng-run