Tengo una buena animación entre mis rutas y agregué una deformación a cada componente para mostrar el componente solo después de que se hayan cargado los datos, se ve así:

mi archivo HTML componente:

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

y este es mi archivo ts:

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

en mi archivo raíz ts tengo esta configuración de animación:

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

y esta es mi plantilla HTML para el archivo raíz

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

mi problema en este momento es que algunos componentes se cargan rápido y otros se cargan lentamente debido a los datos que tienen y esto está bien, pero aquellos que se cargan lentamente, el usuario no ve la animación, pero solo se muestra el componente cuando está listo. .

Me gustaría comenzar la animación después de que se carguen los datos, tal vez incluso para mostrar algún precargador para el usuario antes de que el componente esté listo.

¡gracias!

EDITAR:

este es mi archivo 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 })) ]), ]); }