Exécution de plusieurs animations de requête en parallèle

Question

J'ai deux composants routés et leur conteneur auquel j'ai défini un déclencheur d'animation, @slide, dans lequel je recherche pour chacun et anime en conséquence.

<div [@slide]="o.activatedRouteData.name"> 
    <router-outlet #o="outlet"></router-outlet> 
<div> 

RouterModule.forRoot([ 
    { path: '',  component: HomeComponent, data: { name: 'home' } }, 
    { path: 'login', component: LoginComponent, data: { name: 'login' } } ]) 

trigger('slide', [ 
    transition('login => home', [ 
    query('home', style({ left: '-120%', right: '120%' })), 
    query('login', style({ left: '0', right: '0' })), 

    query('home', animate(duration, style({ left: '0', right: '0' }))), 
    query('login', animate(duration, style({ left: '120%', right: '-120%' }))) 
]) 

Cela fonctionne, sauf que le second attend d'animation pour le premier à terminer avant le tir, alors que je suis à la recherche est un moyen d'avoir ils tirent en parallèle. Pensées?

Answer 1

Solution: Enroulez les requêtes dans un group()

trigger('slide', [ 
    transition('login => home', [ 
    query('home', style({ left: '-120%', right: '120%' })), 
    query('login', style({ left: '0', right: '0' })), 

    group([ query('home', animate(duration, style({ left: '0', right: '0' }))), 
      query('login', animate(duration, style({ left: '120%', right: '-120%' }))) ]) 
]) 

Crédit Ploppy3 plus sur GitHub.

Answer 2

Ploppy3 vous a répondu ici: https://github.com/angular/angular/issues/9845#issuecomment-321240191 comment faire une animation séparée pour le routeur sur init. L'animation enfant est désactivée par défaut, vous ne verrez que l'animation du routeur (pour l'activer, vous pouvez vérifier https://angular.io/api/animations/animateChild). Donc, pour faire ce que vous voulez, j'ai juste besoin d'ajouter l'animation dont vous avez besoin pour les composants. Vous devez donc ajouter routerAnimation comme écrit par Ploppy3 et utiliser la diapositive pour les composants.