Angular：在子元素中保留动画会产生级联延迟

Question

我的应用程序中有一个用于进入和离开的动画序列。

animations: [
    trigger('barSlideInOut', [
      transition(':enter', [
        style({transform: 'translateY(80px)'}),
        animate('0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0)', style({transform: 'translateY(0px)'}))
      ]) ,
      transition(':leave', [
        style({transform: 'translateY(0px)'}),
        animate('0.35s cubic-bezier(0.3, 0.0, 0.8, 0.15)', style({transform: 'translateY(80px)'}))
      ])
    ])
  ]

该组件中的子元素也有自己的动画。

在 :enter 上一切都按预期工作，但在 :leave 上我假设子动画被父动画持续时间延迟，因为 ngDestroy 尚未被触发。最终孩子们会因为父母被摧毁而消失。

我有什么解决方案可以修复此问题以在同一时刻触发吗？子动画绑定到主机，因为它们是可重用的组件。

谢谢。

Answer 1

如果你做这样的事情：

    trigger('parentCollapse', [
  transition(':enter', [style({ height: '0', visibility: 'hidden', overflow: "hidden" }), animate('10ms ease-in', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })), query('@slowCollapse', animateChild(), {optional: true})]),
  transition(':leave', [query('@slowCollapse', animateChild()), style({ height: AUTO_STYLE, visibility: AUTO_STYLE, overflow: "hidden" }), animate('300ms ease-out', style({ height: '0', visibility: 'hidden' }))])
]),
trigger('slowCollapse', [
  transition(':enter', [style({ height: '0', minHeight: '0', visibility: 'hidden', overflow: "hidden" }), animate('600ms ease-in', style({ height: AUTO_STYLE, minHeight: AUTO_STYLE, visibility: AUTO_STYLE }))]),
  transition(':leave', [style({ height: AUTO_STYLE, minHeight: AUTO_STYLE, visibility: AUTO_STYLE, overflow: "hidden" }), animate('600ms ease-out', style({ height: '0', minHeight: '0', visibility: 'hidden' }))])
])

动画搜索子项并触发动画