在查询中使用“：enter”时，“角动画”构建器返回零个元素

Question

我正在使用AnimationBuilder函数使用AnimationPlayer和query为子元素设置动画

但是当我在查询中使用:enter时，它便停止工作

private createAnimation(animation): AnimationFactory {
  return this.animationBuilder.build([
    query(
       // '.child-element',    // This works
      ':enter .child-element', // This does not work !
      [
        stagger(100, [useAnimation(animation)])
      ]
    )
  ]);
}

  

错误   错误：由于以下错误而无法创建动画：query(":enter .child-element")返回了零个元素。 （如果要允许，请使用query(":enter .child-element", { optional: true })。）

我知道引发错误是因为调用createAnimation函数时未渲染元素，但是如何将动画应用于子项:enter事件上？

如果我使用传统的Angular动画方式，则上面的相同代码可以工作，但是我需要在运行时动态完成

这里是stackblitz repro

Answer 1

query(:enter)和:leave已损坏，请使用此链接来了解如何正确使用过渡

Angular 4 Animation won't trigger on route change