javascript - Repeat animation by clicking button - Stack Overflow

admin管理员组

文章数量:1357716

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>

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?

• javascript
• css
• animation
• css-animations

Share Improve this question Follow edited Aug 8, 2017 at 18:35 Vadim Ovchinnikov 14.1k77 gold badges6565 silver badges9494 bronze badges asked Aug 8, 2017 at 18:09 StwoschStwosch 64222 gold badges77 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>

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

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>

本文标签： javascriptRepeat animation by clicking buttonStack Overflow