CODEWITHSUNDEEP
angularionic2
Blackout
Blackout

Reputation: 438

Ionic 2 animate an image when click

I'm using ionic 2+ and trying to animate an image using animate.css. During initial load the image it should use rubberBand animation and everytime on click it should use bounce animation. The rubberBand animation works fine on load but the bounce animation only works once no matter how many times I click. What am I doing wrong?

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";
  }

Upvotes: 1

Views: 1018

Answers (1)

Ivar Reukers
Ivar Reukers

Reputation: 7719

So I suppose you want to execute the bounce everything the user clicks on the element?

With your current solution, you're setting the imgClass within the same function twice. These get executed immediately and won't refresh the class.

A workaround would be to use:

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

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

I believe this will work.

Upvotes: 1

Related Questions