Angular http请求完全加载后的角度动画

我对来自api的数据的动画有问题，例如，如果我想实现角度4交错动画，我需要提供objects.lenght

<div [@listAnimation]="objects.length">
  <div *ngFor="let object of objects">
        {{ object?.title }}
  </div>
</div>

交错动画是这样的

import { trigger, state, animate, transition, style , query , stagger , keyframes} from '@angular/animations';
 
export const listAnimation =  

    trigger('listAnimation', [
      transition('* => *', [

            query(':enter' , style({ opacity: 0 }) , {optional: true}),

            query(':enter' , stagger( '300ms' , [
                animate('1s ease-in' , keyframes([
                    style({opacity: 0 , transform: 'translateY(-75px)' , offset: 0}),
                    style({opacity: .5 , transform: 'translateY(35px)' , offset: 0.3}),
                    style({opacity: 1 , transform: 'translateY(0)' , offset: 1})                  
                ]))
            ]) , {optional: true}),

            query(':leave' , stagger( '300ms' , [
                animate('1s ease-in' , keyframes([
                    style({opacity: 1 , transform: 'translateY(0)' , offset: 0}),
                    style({opacity: .5 , transform: 'translateY(35px)' , offset: 0.3}),
                    style({opacity: 0 , transform: 'translateY(-75px)' , offset: 1})                  
                ]))
            ]) , {optional: true})

        ]),
    ]);

---

调用完成后，是否有任何方法调用或运行动画？

您可以使用Angular的生命周期挂钩，以便OnInit调用您服务的方法。在那一刻，你得到了所需的信息。然后在ViewInit之后运行动画

检查 及

更新1：

可以为组件实现多个生命周期挂钩。 假设您的动画有两种状态（例如中的），它将如下所示：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

    @Component({
    ...
    animations: [
      trigger('listAnimation', [
        state('inactive', style({
          backgroundColor: '#eee',
          transform: 'scale(1)'
        })),
        state('active',   style({
          backgroundColor: '#cfd8dc',
          transform: 'scale(1.1)'
        })),
        transition('inactive => active', animate('100ms ease-in')),
        transition('active => inactive', animate('100ms ease-out'))
      ])
    ]
})

export class AppComponent implements OnInit, AfterViewInit { 
  ...
  animationState = 'inactive';

  constructor(private _api: ApiService ) {}

  ngOnInit() {
    this._api.getAllBlogPosts()
      .subscribe(result => this.objects= result);
  }
  ngAfterViewInit(){
    // run animation by changing the state
    this.animationState = this.animationState === 'inactive ' ? 'active' : 'inactive ';
  }
}

---

我不知道Angular 4，但在1.x中，我会将其包装成

或

和

ng show

或

ng，如果
对象是非空的，我不知道Angular 4，但在1.x中，如果
对象
是非对象，我会将其包装在
或
和
ng show
或
ng中-null@Mawg谢谢你，它解决了我的问题，然后我会把评论复制成一个答案，你可以接受它，以帮助其他人在未来。欢迎登机&很高兴能帮上忙谢谢你的回复，但我没有收到。组件是否可以实现2个生命周期挂钩？afterViewInit和OnInit都在一起，顺便说一句，如果您能更具体地说明如何运行实现AfterVireInit的动画，我将不胜感激。我怎样才能停止执行交错动画，因为它在加载数据之前运行得很快，而且出错。非常感谢您的时间。但基于上述解决方案，我应该将animationState放入[@listAnimation]=“animationState”，然后正如我在第一个问题中提到的，我有一个交错的动画，需要objects.length。是否可以将类似这样的内容写入组件html？[@listAnimation]=“{skills.length，animationState}”您好，您的html中应该可以有如下内容：。。。
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

    @Component({
    ...
    animations: [
      trigger('listAnimation', [
        state('inactive', style({
          backgroundColor: '#eee',
          transform: 'scale(1)'
        })),
        state('active',   style({
          backgroundColor: '#cfd8dc',
          transform: 'scale(1.1)'
        })),
        transition('inactive => active', animate('100ms ease-in')),
        transition('active => inactive', animate('100ms ease-out'))
      ])
    ]
})

export class AppComponent implements OnInit, AfterViewInit { 
  ...
  animationState = 'inactive';

  constructor(private _api: ApiService ) {}

  ngOnInit() {
    this._api.getAllBlogPosts()
      .subscribe(result => this.objects= result);
  }
  ngAfterViewInit(){
    // run animation by changing the state
    this.animationState = this.animationState === 'inactive ' ? 'active' : 'inactive ';
  }
}