web-dev-qa-db-ja.com

アニメーションを繰り返すangular 4

次のアニメーションを作成しました。

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>

アニメーションは機能しますが、問題はそれが1回しか実行されないことです。コンポーネントをロードするときに、「n」回実行する必要があります。どうやって？助けてください

angularanimationrepeatangular-animations
9
ararb78

これを行う方法は、前のアニメーションの終わりに、切り替えた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

（私はテキストにアニメーションを適用しました）

7
br.julien

keyframes を animation-iteration-count とともに使用します（アニメーションを繰り返す回数を設定します）

0
Adam Pery