コンポーネントのデータがサービスからロードされた後にルータ間でアニメーションを開始する方法

Question

私のルート間に素晴らしいアニメーションがあり、データがロードされた後にのみコンポーネントを表示するためにすべてのコンポーネントにワープを追加しました。 ：

私のコンポーネントHTMLファイル：

<div *ngIf="isDataAvailable"> 
    ...my component html template... 
</div> 

と、これは私のTSファイルである：私のルートTSファイル内

isDataAvailable:boolean = false; 
ngOnInit() { 
    this.subscription = this.clientsService.getClients().subscribe(
     (result:any) => { 
     this.data = result.clients; 
     this.isDataAvailable = true; 
     } 
    ); 
} 

私はこのアニメーションの設定を持っている：

import { customTransition } from './custom-transition.animation'; 

@Component({ 
    selector: 'app-master', 
    templateUrl: './master.component.html', 
    styleUrls: [ 
    './master.component.css', 
    ], 
    animations: [customTransition()], 
    encapsulation: ViewEncapsulation.None 
}) 

、これはルート・ファイルのための私のHTMLテンプレートです

<ng2-page-transition [animation]="customAnimation"> 
    <div [@ng2ElementState]="customAnimation.state"> 
     <router-outlet></router-outlet> 
    </div> 
</ng2-page-transition> 

私の問題は今、いくつかのコンポーネントが高速にロードされ、一部がゆっくりなぜなら、彼らが持っているデータをロードしていると、これは罰金であるということですユーザーがゆっくりと読み込んでいるものにはアニメーションが表示されず、準備ができたらコンポーネントだけが表示されます。

データがロードされてから、 をロードした後、アニメーションを開始したいと思うかもしれません。おそらく、コンポーネントの準備が整う前に、いくつかのプリローダーを表示することさえできます。

ありがとうございました！

EDIT：

これは私のcustomTransition.animation.tsファイルです：アニメーションは、ルート・ファイル内のコンポーネントではなく内にある必要があります

//custom-transition.animation.ts 
import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core'; 

export function customTransition():AnimationEntryMetadata { 
    return slideOutAndIn(); 
} 

function slideOutAndIn():AnimationEntryMetadata { 
    return trigger('ng2ElementState', [ 
    state('leave', style({ 
     position:'inherit', 
     display:'block', 
     width:'100%' 
    })), 
    state('enter', style({ 
     position:'inherit', 
     display:'block', 
     width:'100%' 
    })), 
    transition('* => enter', [ 
     style({ 
      transform: 'translateY(10%)', 
      opacity: 0 
     }), 
     animate('0.5s ease-in-out', style({ 
      transform: 'translateY(0%)', 
      opacity: 1 
     })) 
    ]), 
    transition('* => leave', [ 
     style({ 
     transform: 'translateY(0%)', 
     opacity: 0 
     }), 
     animate('0.5s ease-in-out', style({ 
     transform: 'translateY(-10%)', 
     opacity: 0 
     })) 
    ]), 
    ]); 
} 

Answer 1

、 ので、これは私の結果である：

import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core'; 

@Component({ 
    selector: 'app-clients', 
    templateUrl: './clients.component.html', 
    styleUrls: ['./clients.component.css'], 
    animations: [trigger('slideIn', [ 
    state('inactive', style({ 
     transform: 'translateY(10%)', 
      opacity: 0 
    })), 
    state('active', style({ 
     transform: 'translateY(0%)', 
      opacity: 1 
    })), 
    transition('active => inactive', animate('.6s ease')), 
    transition('inactive => active', animate('.6s ease'))] 
    ] 
}) 

export class ClientsComponent implements OnInit,OnDestroy { 
    state:string = "inactive"; 

    constructor(private clientsService: ClientsService) {} 

    ngOnInit() { 
    this.updateData(); 
    } 

    updateData(){ 
    this.subscription = this.clientsService.getClients().subscribe(
     (result:any) => { 
     this.data = result.clients; 
     this.state = "active"; 
     } 
    ); 
    } 
}