Angular 5 parent and child animations not working

Question

I'm trying to create side menu with additional animation for inner arrow element:

https://stackblitz.com/edit/angular5-menu-animation

In this realization animations are working in the next order:

1. Menu is opening
2. Arrow is rotating

But I want to start this 2 animations at the same time. It works good in Angular 4.4.x but not working in 5.2.x.

Need some help with this issue.

Answer 1

You can check my working fork here.

You have to add the group function so that the steps are executed in parallel instead of in sequence as sequence is taken by default.

 import { group } from '@angular/animations';

 transition('in <=> out', [
    group([
      query('@buttonInOut', [
        animateChild()
      ]),
      animate('300ms ease-out')
    ])
  ])

If you check the docs on sequence, it is said that;

sequence Specifies a list of animation steps that are run one by one. (sequence is used by default when an array is passed as animation data into transition.)

The sequence function can either be used within a group or a transition and it will only continue to the next instruction once each of the inner animation steps have completed.

To perform animation styling in parallel with other animation steps then have a look at the group animation function.