Angular animations builder returned zero elements when the ":enter" is used in the query

Question

I am using AnimationBuilder and AnimationPlayer to animate children elements using the query function

However it stops working when I use :enter in the query

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

ERROR Error: Unable to create the animation due to the following errors: query(":enter .child-element") returned zero elements. (Use query(":enter .child-element", { optional: true }) if you wish to allow this.)

I understand that the error was thrown because the elements were not rendered when the createAnimation function was called but then how can I apply the animation on children :enter event?

The same code above works if I use the traditional way of Angular animation, but I need this to be done dynamically at run time

Here is a stackblitz repro

Answer 1

query(:enter) and :leave are broken use this link to know how to properly use transitions

Angular 4 Animation won't trigger on route change