イオン2アニメーション画像をクリックすると

Question

私はイオン2+を使用していて、animate.cssを使用して画像をアニメーションしようとしています。初期ロード時にはrubberBandアニメーションを使用する必要があり、クリックするたびにバウンスアニメーションを使用する必要があります。 rubberBandアニメーションは読み込み時に正常に動作しますが、バウンスアニメーションは何回クリックしても一度しか動作しません。私は間違って何をしていますか？

HTML

<img src="/assets/image.png (click)="animate()" [className]="imgClass"/> 

typescriptです

constructor(public navCtrl: NavController) { 
    this.imgClass = "animated rubberBand"; 
    } 

animate() { 
    this.imgClass = ""; 
    this.imgClass = "animated bounce"; 
    } 

Answer 1

だから私は、ユーザーが要素をクリックバウンスすべてを実行するとしますか？

現在のソリューションでは、同じ機能内にimgClassを2回設定しています。これらはすぐに実行され、クラスをリフレッシュしません。

回避策が使用することを次のようになります。

animate() { 
    this.imgClass = "animated"; 

    // this will execute async after 100ms 
    setTimeout(() => { 
    this.imgClass = "animated bounce"; 
    }, 100); 
} 

私はこれが働くと考えています。