web-dev-qa-db-fra.com

Déclencher une animation après le chargement de la page dans angular 8, ExpressionChangedAfterItHasBeenCheckedError

Comme la question le suggère, j'essaie de trouver un moyen d'animer un élément après le chargement de la page. J'ai regardé partout mais il semble y en avoir trop et aucun moyen de le faire en même temps, j'espère quelques conseils. Une fois la page chargée dans le mobile, le logo doit s'animer lentement vers le haut à droite et également réduire sa taille, si cela est logique.

Je recherche l'équivalent Angular de $(document).ready(function() {}

Selon les suggestions, j'ai utilisé ngAfterViewInit() mais je ne peux toujours rien faire fonctionner.

Sous le index-section.component.html

<section class="index-section">
  <div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
    <figure>
      <img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
    </figure>
  </div>
  <div class="index-media-wrapper">
    <div class="media-container">
      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
    </p>
  </div>
</section>

Et le index-section.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { trigger, state, animate, style, group, query, transition } from '@angular/animations';

@Component({
  selector: 'app-index-section',
  templateUrl: './index-section.component.html',
  styleUrls: ['./index-section.component.scss'],
  animations: [
    trigger('logoMoveResize', [
      state('initial', style({
        transform: 'translateX(0%) translateY(0%) scale(1)',
      })),
      state('end', style({
        transform: 'translateX(25%) translateY(-25%) scale(.3)',
      })),
      transition('initial <=> end', [animate('1s')]),
    ])
  ]
})
export class IndexSectionComponent implements OnInit {

  load_completed = true;
  innerWidth: any;

  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

  ngAfterViewInit() {
    if ( this.innerWidth < 1000 ) {
     this.load_completed = false;
    }
  }
}

Voici l'erreur que j'obtiens:

enter image description here

cssangulartypescriptangular8
4
kontenurban

Vous pouvez utiliser Résolution angulaire - Interface que les classes peuvent implémenter pour être un fournisseur de données. Une classe de fournisseur de données peut être utilisée avec le routeur pour résoudre les données pendant la navigation. L'interface définit une méthode resolver () qui sera invoquée au démarrage de la navigation. Le routeur attendra alors que les données soient résolues avant que la route ne soit finalement activée.

Pour plus de détails - https://angular.io/api/router/Resolve

0
Amit Kumar