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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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