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

正在对类更改进行批处理。您应该请求动画帧将类添加回元素：

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

请参阅updated Fiddle

Answer 2

<强> Updated fiddle

在添加新类animation之前，你应该给删除一个额外的时间（只需要一个小的Timeout就可以了）：

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时序。如果你在添加的类中有它，一旦删除它就会失去时间，所以它会重新捕捉到较小的大小。

如果你不关心动画返回，请保持你的css相同，并将超时更改为更短的100。

尝试做类似的事情：

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>

单击按钮重复动画

3 个答案: