Angular 5 родительская и дочерняя анимация не работают одновременно

Question

Я пытаюсь создать боковое меню с дополнительной анимацией для внутреннего элемента стрелки:

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

В этой реализации анимации работают в следующем порядке:

1. Меню открывается
2. Стрелка вращается

Но я хочу запустить эти 2 анимации одновременно. Он хорошо работает в Angular 4.4.x, но не работает в 5.2.x.

Нужна помощь с этой проблемой.

Answer 1

Вы можете проверить мою рабочую вилку здесь .

Необходимо добавить функцию group , чтобы шаги выполнялись параллельно, а не последовательно, поскольку последовательность берется по умолчанию.

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

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

Если вы проверяете документы по последовательности , говорят, что;

sequence Указывает список шагов анимации, которые выполняются один за другим. один. (последовательность используется по умолчанию, когда массив передается как анимация данные в переход.)

Функция последовательности может использоваться в группе или переход, и он будет переходить к следующей инструкции только один раз шагов внутренней анимации завершены.

Выполнение стилизации анимации параллельно с другими шагами анимации. затем взгляните на функцию групповой анимации.