Ionic 2點擊圖像時動畫圖像

Question

我正在使用ionic 2+並嘗試使用animate.css設置動畫效果。在初始加載圖像時，它應該使用橡皮筋動畫，每次點擊它都應該使用反彈動畫。橡皮筋動畫可以在加載時正常工作，但無論點擊多少次，反彈動畫只能運行一次。我究竟做錯了什麼？

HTML

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

打字稿

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

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

Answer 1

，所以我想你想執行的反彈一切元素用戶點擊？

使用您當前的解決方案，您將同一個函數中的imgClass設置爲兩次。這些會立即執行，不會刷新課程。

一種解決方法是使用：

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

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

我相信這會工作。