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（）函数。

有什么想法吗？预先感谢。

使用Angular 6无限循环动画

0 个答案: