如何重新启动动画 - ionic

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>

因为再次点击按钮按钮不会添加 class 因为 class 在元素 <div [className]="myclass"> Hi Animation </div>

上存在（淡入）

myclass: string;

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

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

Answer 1

这是因为您已将 class 名称指定为淡入。您也可以使用 angular 动画或

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

我的班级：字符串

点击功能内部

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

如何重新启动动画 - ionic

How to restart animation - ionic

angular

typescript

ionic-framework

sass

angular-animations