使用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”動畫。

通過搜索，我發現無限循環的一種方法（或唯一方法）是通過偵聽動畫“完成”事件來切換動畫狀態。

所以我嘗試了一下，但沒有成功。 下一個代碼應該在動畫完成后再運行一次，但是它只能運行一次（對於'：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（）函數。

有任何想法嗎？ 提前致謝。