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

一种方法是使用两种状态，你可以在上一个动画结束时切换，这个状态可以和你定义的一样多。

<强> 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

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

Answer 2

将keyframes与animation-iteration-count一起使用（配置动画应重复的次数）

重复动画角4

2 个答案: