Ionic 2在单击时为图像设置动画

Question

我使用离子2+并尝试使用animate.css为图像添加动画效果。在初始加载图像时，它应该使用rubberBand动画，每次点击它都应该使用反弹动画。 rubberBand动画在加载时工作正常，但无论我点击多少次，弹跳动画都只能工作一次。我做错了什么？

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

我相信这会奏效。