Run multiple query animations in parallel

Question

I have two routed components and their container to which I've set an animation trigger, @slide, wherein I query for each and animate accordingly.

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

This works, except that the second animation waits for the first to complete before firing, while what I'm looking for is a way to have them fire in parallel. Thoughts?

Answer 1

Wrap the queries in a 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 to Ploppy3 over on GitHub.

Answer 2

Ploppy3 answered you here: https://github.com/angular/angular/issues/9845#issuecomment-321240191 how to make separate animation for router on init. Child animation is disabled by default so you will see just router animation (to enable it you can check https://angular.io/api/animations/animateChild). So to do what you want I need just add animation you need for the components. So you need to add routerAnimation as Ploppy3 wrote and to use slide for components.