单击“离子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);
}

我相信这会成功的。