Repeat animation by clicking button

Question

I would like to repeat animation every time, when I click my button. I tried to do something like this.

const dist = document.querySelector('.dist');

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('animation');
  dist.classList.add('animation');
});

.dist {
  width: 100px;
  height: 100px;
  background: black;
  margin-bottom: 30px;
}

.animation {
  transform: scale(1.5);
  transition: transform 3s;
}

<div class="dist"></div>
<button type="button">Trigger Animation</button>

But actually, this snippet does it only one time.

dist.classList.remove('animation');
dist.classList.add('animation');

Shouldn't this part remove state and start animating from the beginning?

Answer 1

The class changes are being batched. You should request an animation frame to add the class back to the element:

window.requestAnimationFrame(function() {
    dist.classList.add('animation');
});

const dist = document.querySelector('.dist');

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('animation');
  window.requestAnimationFrame(function() {
    dist.classList.add('animation');
  });
});

.dist {
  width: 100px;
  height: 100px;
  background: black;
  margin-bottom: 30px;
}

.animation {
  transform: scale(1.5);
  transition: transform 3s;
}

<div class="dist"></div>
<button type="button">Trigger Animation</button>

Docs for requestAnimationFrame

See updated Fiddle

Answer 2

This doesn't work because there is no time there for the animation to happen. Essentially the browser doesn't ever notice the class being removed because the element gains it back immediately after it is removed. There's no time for it to see the change so it doesn't animate. In order to get it to repeat you need to give it some time to notice, a setTimeout is a good choice for this.

Also if you want it to animate returning back to the smaller size you need to change which class has the transition timing. If you have it on the added class, once it's remove you lose the timing so it snaps back to the smaller size.

If you don't care about the animation returning, keep your css the same and change the timeout to something shorter like 100.

Try doing something like:

const dist = document.querySelector('.dist');

document.querySelector('button').addEventListener('click', () => {
  if(!dist.classList.contains('animation')){
    dist.classList.add('animation');
  } else {
    dist.classList.remove('animation');
    // Add it back after 3 seconds;
    setTimeout(function(){
        dist.classList.add('animation');
    }, 1000 * 3);
  }
});

.dist {
  width: 100px;
  height: 100px;
  background: black;
  margin-bottom: 30px;
  transition: transform 3s;
}

.animation {
   transform: scale(1.5);
 }

<div class="dist"></div>
<button type="button">Trigger Animation</button>

Answer 3

Updated fiddle.

You should give the remove an extra time before adding the new class animation (just a small Timeout will do the trick) :

dist.classList.remove('animation');

setTimeout(function(){
    dist.classList.add('animation');
},10);

Hope this helps.

const dist = document.querySelector('.dist');

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('animation');

  setTimeout(function(){
    dist.classList.add('animation');
  },10);
});

.dist {
  width: 100px;
  height: 100px;
  background: black;
  margin-bottom: 30px;
}

.animation {
  transform: scale(1.5);
  transition: transform 3s;
}

<div class="dist"></div>
<button type="button">Trigger Animation</button>

Answer 4

I had The same issue and the above answers helped me get the solution that worked for me . the requestAnimationFrame() was adding the class before the animation is complete , and the setInterval() was keep executing for ever after user clicks and might conflict with the next clicks so , I had tow solutions either using requestAnimationFrame() with time stamp Or use setTimeout() and clearInterval() with the following steps :

1. make a separate function for adding class

function addAnimation(){
 dist.classList.add('animation');
}

2. Inside the removing animation function call the addAnimation() inside setTimeout() and assign that into variable so we can use clearInerval() to stop it

document.querySelector('button').addEventListener('click', () => {
  dist.classList.remove('animation');
  animate = setTimeout(addAnimation,2000)
});

3. now lets go back to the addAnimation() function and add clearInerval() ,this will stop the extra execution that might cause issues.

function addAnimation(){
 dist.classList.add('animation');
clearInerval(animate);
}

this way when user clicks the class is removed and after the setTimeout time the class is added (just once ) since we used clearInerval() after adding the class NOTE : in my case I was first adding the class to animate and then removing it . Hope that is clear and help some one; its too late form the question publish date. All The best!