javascript - Angular 5父子动画不能同时工作

Question

我正在尝试为内部箭头元素创建带有附加动画的侧边菜单:

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

在此实现中，动画按以下顺序工作:

1. 菜单正在打开
2. 箭头在旋转

但是我想同时启动这两个动画。它在 Angular 4.4.x 中运行良好，但在 5.2.x 中不起作用。

在这个问题上需要一些帮助。

Answer 1

你可以查看我的工作叉here .

您必须添加 group函数，以便并行执行步骤而不是按顺序执行，因为默认情况下是按顺序执行的。

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

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

如果您查看 sequence 上的文档,据说;

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.