Repeat the animation by pressing the button

Question

I would like to repeat the animation every time I press a 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>

Run code

But actually this fragment does it only once.

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

Should this part not remove the state and start the animation from the very beginning?

Answer 1

Enumerated class changes. You must 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>

Run code

Docs for requestAnimationFrame

See updated script

Answer 2

Updated violin .

animation ( - ):

dist.classList.remove('animation');

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

, .

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 3

, . , , . , , . , , , setTimeout - .

, , , , transition. , , .

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

Try to do 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>

Run code