使用Angular 6无限循环动画

Question

I have simple fade animation that is used in some images:

trigger('fadeInAnimation', [
  transition(':enter', [
    style({ opacity: 0 }), 
    animate('500ms ease-in')
  ])
])

That is used in this html:

<div 
    [@imgAnimation]="animationState"
    (@imgAnimation.done)="animationEnd($event)" >

        <img src="icon-1.png" 
            @fadeInAnimation>

        <img src="icon-2.png"
          @fadeInAnimation>

There is a parent animation: imgAnimation. That is the one that run the child animations:

trigger('imgAnimation', [
  transition(':enter', [
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ]),
])

That is working fine, but I need to infinitely loop this "imgAnimation" animation.

Searching I have discovered that one way (or the only way) to loop infinitely is by toggling the animation state by listening to the animation "done" event.

So I tried that but didnt work. The next code is supposed to run the animation one more time after it has finished, but it only run once (the first time, for the ':enter' event).

public animationDone(event) {
    this.animationState = 'loop-state';
}

And I add the state transition handler to the trigger:

trigger('imgAnimation', [
  transition(':enter', [
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ]),

  transition('loop-state <=> start-state', 
    // animate('2s linear', style({transform: 'scale(0.5)' })),
    group([
      query('@fadeInAnimation', [stagger(500, animateChild())]),
    ])
  ),
])

But it is not working (everything that is inside the group() function). Nonetheless it is NOT ignoring the state change of "animationState", and I know this because if uncomment the "animate()" line it executes that fine (only the animate()), but it doesnt work with the group() function.

Any ideas? Thanks in advance.