Eviter l'animation de chargement initial quand on utilise "query"

Bonjour,

J'utilise Angular 10 (mais la question devrait être la même pour Angular 2+)

J'ai une page spécifique qui nécessite un

Code:

---

query('.xxx')

---

pour animer plusieurs éléments DOM lors du chargement / déchargement de la page.

Je souhaite appliquer ces animations au chargement / déchargement de la page, SAUF s'il s'agit du premier chargement (première page vue lorsque l'utilisateur vient sur le site).

J'ai essayé plein de choses:

• animations sur la vue parent
• animations sur la vue enfant
• animation sur la vue enfant avec des états spécifiques (ne fonctionne pas car la transition de page est exécutée avant le changement d'état)
• utiliser le :enter pour désactiver l'animation lors du premier chargement

Je peux obtenir ce que je veux avec des triggers de changement de page spécifiques, comme home => pageA, xxx => pageA, mais je ne veux pas lister toutes les possibilités ... L'idée est de le faire fonctionner avec * <=> * ou au moins * => pageA :)

Rien ne donne le résultat escompté... C'est un cas courant je pense, quelqu'un pourrait-il m'aider à y parvenir?

J'ai fait un stackblitz pour montrer l'idée: https://stackblitz.com/edit/angular-...a.component.ts

Le changement de page home <=> pageA devrait déclencher les animations (ça fonctionne), mais le chargement initial sur pageA ne devrait pas (mon problème)...

Ici, je poste le code d'exemple simple:

app.component.ts

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { animate, animateChild, query, style, transition, trigger } from '@angular/animations';   @Component({ selector: 'my-app', template: `<main [@routeAnimations]="prepareRoute(outlet)"> <router-outlet #outlet="outlet"></router-outlet> </main>`, styleUrls: [ './app.component.css' ], animations: [ trigger('routeAnimations', [ transition(':enter', []), // to try disabling first animation transition('* <=> *', [ query(':leave', animateChild(), { optional: true }), query(':enter', animateChild(), { optional: true }), ]), ]) ] }) export class AppComponent { public prepareRoute(outlet: RouterOutlet) { return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']; } }

---

home.component.ts

Code:

---

1 2 3 4 5 6 7 8 9

import { Component, Input } from '@angular/core';   @Component({ selector: 'app-home', template: `<h1>THIS IS HOME</h1><a [routerLink]="['/']">Page A</a>`, styles: [] }) export class HomeComponent { }

---

page-a.component.ts

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import { Component, HostBinding } from '@angular/core'; import { Router } from '@angular/router'; import { animate, stagger, style, transition, query, trigger } from '@angular/animations';   @Component({ selector: 'app-page-a', template: '<div class="red">ELEMENT</div><button (click)="changePage()">Change Page</button>', styles: ['div {width: 200px;height: 100px;background: #f00}'], animations: [ trigger('animation', [ transition(':enter', [ query('.red', [ style({opacity: 0, transform: 'translateY(-100px)'}), animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 1, transform: 'none' })) ]) ]), transition(':leave', [ query('.red', [ animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 0, transform: 'translateY(-100px)' })) ]) ]) ]), ] }) export class PageAComponent {   @HostBinding('@animation') public animation;   public constructor(private router: Router) {}   public changePage(): void { this.router.navigate(['/home']); } }

---

Merci d'avance aux pros ;)