web-dev-qa-db-fra.com

Répéter l'animation angulaire 4

J'ai créé l'animation suivante:

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

J'utilise dans le composant suivant:

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

L’animation fonctionne, le problème est qu’elle ne fonctionne qu’une fois, lorsqu’elle charge le composant, ce que je veux, c’est de le faire "n" fois. Comment je le fais? S'il vous plaît aider

angularanimationrepeatangular-animations
6
ararb78

Une façon de le faire serait d'utiliser deux états, que vous basculeriez, à la fin de l'animation précédente, et ceci autant de fois que vous l'avez défini.

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

Voici la partie importante: [@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

Enfin, vous incrémentez le compteur et basculez l’état à la fin de l’animation précédente:

@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++;
    }
  }
}

Voici un exemple StackBlitz que j'ai créé pour cela: https://angular-wekm96.stackblitz.io

(J'ai appliqué l'animation sur le texte)

6
br.julien

Utilisez images clés avec animation-iteration-count (configure le nombre de répétitions de l'animation)

1
Adam Pery