Цикл анимации бесконечно с Angular 6

Question

У меня есть простая анимация затухания, которая используется в некоторых изображениях:

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

, которая используется в этом html:

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

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

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

Существует родительская анимация: imgAnimation.Это тот, который запускает дочерние анимации:

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

Это работает нормально, но мне нужно бесконечно зацикливать эту анимацию "imgAnimation".

Поиск Я обнаружил, что одним способом (или единственный способ) зацикливаться бесконечно, переключая состояние анимации путем прослушивания события "done" анимации.

Так что я попытался, но ничего не вышло.Следующий код должен запускать анимацию еще раз после ее завершения, но он запускается только один раз (в первый раз для события ': enter').

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

И я добавляю состояниеобработчик перехода на триггер:

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())]),
    ])
  ),
])

Но он не работает (все, что находится внутри функции group ()).Тем не менее, он НЕ игнорирует изменение состояния «animationState», и я знаю это, потому что, если раскомментировать строку «animate ()», он выполняет этот штраф (только animate ()), но не работает с функцией group ().

Есть идеи?Заранее спасибо.