• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

176
Views
Cómo iniciar la animación entre enrutadores después de que los datos del componente se hayan cargado desde un servicio

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 })) ]), ]); }
about 3 years ago · Santiago Trujillo
1 answers
Answer question

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"; } ); } }
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error