重复动画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”次。我该怎么做？请帮忙。

- ararb78

Answer 1

一种方法是使用两个状态，在上一个动画结束时切换这两个状态，并重复执行此操作，直到达到定义的次数。 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。（我将动画应用在了文本上）

- br.julien

Answer 2

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

- Adam Pery

---

我需要在使用动画的组件中进行配置。 - ararb78