How to restart animation - ionic

Question

I have animation that needs to restart on a click. this is my animation :

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

  to {
    opacity: 1;
  }
}

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

On click this button (Animation It) the animation only working for once

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

Because on click button again the button not add class because the class is existing ( fadeIn ) on element <div [className]="myclass"> Hi Animation </div>

myclass: string;

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

Are there way to restart animation (class) on click

score 0 · Accepted Answer · answered Jan 26 '18 at 07:39

0

This is because you have assigned your class name as fadeIn.. You can alternatively use angular animations or

I cannot say if this is the ideal solution to trigger animation but If you want trigger the animation everytime you click some button you should assign that variable to 'fadeIn' and then reassign it as empty string maybe use timeout

myClass: string

Inside the click function

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

answered Jan 26 '18 at 07:39

Mahesh Jadhav

1,091
1
8
13

Hi Mahesh Jadhav thanks for your answer. your cood is working. but when I put `this.myCLass = "fadeIn"` inside setTimeout function and put `this.myClass = ""` outside setTimeout function and change timer to `100`. it work useful – Amjed Omar Jan 26 '18 at 08:08
But check if it is working everytime when you click the button – Mahesh Jadhav Jan 26 '18 at 08:12

How to restart animation - ionic

1 Answers1