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 })) ]), ]); }
la animación debe estar dentro del componente y no en el archivo raíz, así que este es mi resultado:
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"; } ); } }