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

Question

我在使用来自API的数据进行动画时遇到了问题，例如，如果我想实现Angular 4的瞬间动画，我需要提供对象长度。

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

问题在于，在我向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})

        ]),
    ]);

在调用完成后有没有任何方式可以调用或运行动画？

- Ala Shariaty

---

{btsdaf} - Mawg says reinstate Monica

{btsdaf} - Ala Shariaty

{btsdaf} - Mawg says reinstate Monica

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

- br.julien

---

{btsdaf} - Ala Shariaty

{btsdaf} - Ala Shariaty

你好，在你的HTML中应该可以实现以下类似的效果：<div [@animation]="{value: expVal, /* option1: value, option2: value */ }">...</div> https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html - br.julien

Answer 2

我不了解Angular 4，但在1.x版本中，我会将其包装在<div>或<span>中，并根据objects非空使用ng-show或ng-if。

- Mawg says reinstate Monica