重复动画角度4

一种方法是使用两种状态,在上一个动画结束时进行切换,并在定义的时间内进行切换。

动画。输电系统

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)
   ])
]);

应用程序。组成部分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>

应用程序。组成部分输电系统

最后,增加计数器并在上一个动画结束时切换状态:

@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

(我在文本上应用了动画)

keyframes 具有 animation-iteration-count (配置动画应重复的次数)