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

【问题标题】：angular animation after an http request completly loadhttp请求完全加载后的角度动画
【发布时间】：2018-04-06 06:09:24
【问题描述】：

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

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

问题是 objects.lenght 的值在我对 api 的 http 请求完成之前大约不到一秒或更长的时间是未定义的！

这是我的组件

 objects: {};

  constructor(private _api: ApiService ) {}

  ngOnInit() {
    this._api.getAllBlogPosts()
      .subscribe(result => this.objects= result);
  }

交错动画是这样的

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 4，但在 1.x 中，我会将其包装在 <div> 或 <span> 和 ng-show 或 ng-if 中，因为 objects 不是-null
@Mawg 谢谢，解决了我的问题
然后我将评论复制到一个答案中，您可以接受它，以帮助其他人。欢迎加入并很高兴能提供帮助

标签： angular animation angular-animations

【解决方案1】：

您可以使用 Angular 的生命周期钩子，以便 OnInit 调用服务的方法。在那一刻，您将获得所需的信息。然后运行实现 AfterViewInit 的动画。

检查https://angular.io/guide/lifecycle-hooks 和https://angular.io/api/core/AfterViewInit

更新 1：

可以为一个组件实现多个生命周期挂钩。假设您的动画有两种状态（来自https://angular.io/guide/animations 的示例），它看起来像这样：

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 ';
  }
}

【讨论】：

感谢您的回复，但我不明白。组件是否可以实现 2 个生命周期挂钩？ afterViewInit 和 OnInit 都在一起，顺便说一句，如果您能更具体地运行实现 AfterVirewInit 的动画，我将不胜感激。我怎么能阻止交错动画的执行，因为它在加载数据之前运行速度很快并且通过错误
非常感谢您抽出宝贵时间。但是基于上面的解决方案，我应该将animationState放入[@listAnimation]="animationState"，然后正如我在第一个问题中提到的那样，我有一个交错动画女巫需要objects.length。是否可以将这样的内容写入组件 html ？ [@listAnimation]="{skills.length , animationState }"
您好，您的 html 中应该可以有如下所示的内容：
...
yearofmoo.com/2017/06/new-wave-of-animation-features.html

【解决方案2】：

我不知道 Angular 4，但在 1.x 中，我会将其包装在 <div> 或 <span> 和 ng-show 或 ng-if 中，基于 objects 非空

【讨论】：