Mehrere Abfrageanimationen parallel ausführen

Question

Ich habe zwei geroutete Komponenten und ihren Container, auf den ich einen Animationsauslöser gesetzt habe, @slide, wobei ich für jeden abfragen und entsprechend animiere.

<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%' }))) 
]) 

Dies funktioniert, mit der Ausnahme, dass die zweite Animation wartet auf die erste vor dem Brennen zu vervollständigen, während das, was ich suche einen Weg gibt, haben sie feuern parallel. Gedanken?

Answer 1

Lösung: Einfach wickeln Sie die Abfragen in einem 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%' }))) ]) 
]) 

Credit Ploppy3 über auf GitHub.

Answer 2

Ploppy3 hat Sie hier beantwortet: https://github.com/angular/angular/issues/9845#issuecomment-321240191 wie separate Animation für Router auf Init machen. Die untergeordnete Animation ist standardmäßig deaktiviert, so dass Sie nur die Router-Animation sehen (um sie zu aktivieren, können Sie https://angular.io/api/animations/animateChild überprüfen). Also, um zu tun, was Sie wollen, brauche ich nur eine Animation, die Sie für die Komponenten benötigen. Also müssen Sie routerAnimation wie Ploppy3 geschrieben und Folie für Komponenten verwenden.