Angular 5父子动画无法同时触发问题求助

我之前也碰到过Angular版本升级后动画同步性出问题的情况，结合你的描述，应该是Angular 5对动画系统的触发逻辑做了调整，导致原本同步的动画变成了顺序执行。下面给你几个可行的解决方案：

1. 使用group()动画组同步执行多个动画 #

这是最直接的解决方式，把菜单展开和箭头旋转的动画打包到同一个过渡组里，让它们同时启动。

首先在动画定义里引入group：

import { trigger, state, style, animate, transition, group } from '@angular/animations';

然后定义包含两个动画的触发器：

export const sidebarAnimation = trigger('sidebarState', [
  state('closed', style({
    width: '60px',
  })),
  state('open', style({
    width: '200px',
  })),
  transition('closed <=> open', [
    group([
      // 菜单展开动画
      animate('300ms ease-in-out', style({ width: '*' })),
      // 箭头旋转动画（通过query选中箭头元素）
      query('.arrow', animate('300ms ease-in-out', style({ transform: 'rotate(90deg)' })))
    ])
  ])
]);

模板里只需要给侧边栏绑定这个触发器即可：

<div [@sidebarState]="isMenuOpen ? 'open' : 'closed'" class="sidebar">
  <div class="arrow"></div>
  <!-- 菜单内容 -->
</div>

2. 确保两个动画绑定到同一个状态触发器 #

如果之前是分开绑定菜单和箭头的动画（比如一个绑定到侧边栏，一个绑定到箭头元素），要确保它们的触发条件完全一致，并且动画时长、缓动函数完全相同。

比如模板里这样写：

<div [@menuExpand]="isMenuOpen" class="sidebar">
  <div [@arrowRotate]="isMenuOpen" class="arrow"></div>
</div>

然后动画定义中，两个触发器的过渡配置保持同步：

export const menuExpand = trigger('menuExpand', [
  state('false', style({ width: '60px' })),
  state('true', style({ width: '200px' })),
  transition('false <=> true', animate('300ms ease-in-out'))
]);

export const arrowRotate = trigger('arrowRotate', [
  state('false', style({ transform: 'rotate(0deg)' })),
  state('true', style({ transform: 'rotate(90deg)' })),
  transition('false <=> true', animate('300ms ease-in-out'))
]);

这种方式下，只要isMenuOpen状态变化，两个动画会同时响应启动。

3. 检查Angular 5动画的变更点 #

Angular 5对动画系统做了一些优化，比如默认关闭了autoStyles，如果你的动画依赖元素的默认样式，可能需要显式设置。另外，避免在动画中使用嵌套的触发逻辑（比如父元素动画结束后再触发子元素动画），这会导致顺序执行。

如果以上方法都不生效，可以尝试显式设置动画的delay为0ms，确保没有额外的延迟：

animate('300ms 0ms ease-in-out', style({ ... }))

内容的提问来源于stack exchange，提问作者daslashi