如何重新启动动画 - 离子

Question

我的动画需要在点击后重新启动。这是我的动画：

/* scss file */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
}

点击这个按钮（Animation It）动画只工作一次

<div [className]="myclass"> Hi Animation </div>
<button ion-button (click)="animationIt()">Animation It</button>

因为再次单击按钮，该按钮未添加类，因为该类在元素 <div [className]="myclass"> Hi Animation </div> 上已存在 (fadeIn)

myclass: string;

animationIt() {
  this.myclass = 'fadeIn';
}

有没有办法在点击时重新启动动画（类）

Answer 1

这是因为你已经将你的类名指定为fadeIn.. 你可以选择使用角度动画或

我不能说这是否是触发动画的理想解决方案，但如果您想在每次单击某个按钮时触发动画，您应该将该变量分配给“fadeIn”，然后将其重新分配为空字符串可能使用超时

我的类：字符串

点击函数内部

animationIt() {
  this.myCLass = "fadeIn"
  setTimeout(() =>{
    this.myClass = "" //assign it as empty string after a specific time 
  }, 1000)       // TIME IN MILLSECONDS
}