javascript - 通过单击按钮重复动画

Question

每次单击按钮时，我都想重复动画。我试着做点什么 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>

但实际上，这个片段只做了一次。

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

这部分不应该删除状态并从头开始动画吗？

Answer 1

Updated fiddle .

在添加新类 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>