重复动画angular 4

Question

我创建了以下动画：

fade.animation.ts:

import { Component } from '@angular/core';
import { trigger, state, animate, query, transition, style, stagger } from 
'@angular/animations';
export let fade = trigger('fade', [
   state('void', style({ opacity: 0 })),
   transition(':enter, :leave', [
    animate(2000)
   ])
]);

我将在下一个组件中使用：

 <div id="mpl_loader" class="divCabeceraTitulo">
        <div class="lineaTitulo">
            <div class="logoMinisterio" [@fade]>
                <img src="assets/imagenes/SRDLOGO.png">
            </div> 
            <div class="logoGesRepro">
               <img  class="imgGesRepro" src="assets/imagenes/gesReproB.png">
            </div>           
            <div class="descripcionAplicacion">
                <span>título</span>
            </div>
        </div>
  </div>

动画有效，问题是它只运行一次，当它加载组件时，我想要的是让它运行 "n" 次。我怎么办？请帮忙

Answer 1

使用keyframes with animation-iteration-count（配置动画重复的次数）

Answer 2

一种方法是使用两种状态，您将在上一个动画结束时切换这两种状态，并且这种状态的持续时间与您定义的一样多。

animations.ts

import { Component } from '@angular/core';
import { trigger, state, animate, query, transition, style, stagger } from 
'@angular/animations';
export const fade = trigger('fade', [
   state('inactive', style({ opacity: 0 })),
   state('active', style({ opacity: 1 })),
   transition('* <=> *', [
    animate(2000)
   ])
]);

app.component.html

这是重要的部分：[@fade]="state" (@fade.done)="onDone($event)"

<div id="mpl_loader" class="divCabeceraTitulo">
        <div class="lineaTitulo">
            <div class="logoMinisterio" [@fade]="state" (@fade.done)="onDone($event)">
                <img src="assets/imagenes/SRDLOGO.png">
            </div> 
            <div class="logoGesRepro">
               <img  class="imgGesRepro" src="assets/imagenes/gesReproB.png">
            </div>           
            <div class="descripcionAplicacion">
                <span>título</span>
            </div>
        </div>
  </div>

app.component.ts

最后，您递增计数器并在上一个动画结束时切换状态：

@Component({
  ...
  animations: [fade]
})
export class AppComponent {
  times = 5;
  counter = 0;

  onDone($event) {
    // call this function at the end of the previous animation.
    // run it as many time as defined
    if (this.counter < this.times) {
      this.state = this.state === 'active' ? 'inactive' : 'active';
      this.counter++;
    }
  }
}

这是我为此创建的 StackBlitz 示例：https://angular-wekm96.stackblitz.io

（我在文字上应用了动画）

重复动画angular 4

Repeat animation angular 4

angular

animation

repeat

angular-animations