点击按钮重复动画

Question

当我点击按钮时，我希望重复动画。我尝试做了一些类似这样的东西。

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');

这部分是否应该移除状态并从头开始进行动画？

- Stwosch

Answer 1

更新后的示例。

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

- Zakaria Acharki

Answer 2

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

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>

requestAnimationFrame 文档

查看 更新后的 Fiddle 示例

- KevBot

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>

- Don

Answer 4

我曾经遇到过同样的问题，上面的答案帮助我找到了适合我的解决方案。 requestAnimationFrame()在动画完成之前添加类，而setInterval()在用户点击后会一直执行，并可能与下一个点击发生冲突，因此我有两个解决方案：要么使用带时间戳的requestAnimationFrame()，要么使用setTimeout()和clearInterval()并按照以下步骤进行：

1. 为添加类创建一个单独的函数

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

在移除动画函数内部调用setTimeout()中的addAnimation()，并将其分配给变量，以便我们可以使用clearInterval()来停止它。

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

现在让我们回到addAnimation()函数并添加clearInterval()，这将停止可能导致问题的额外执行。

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

这样，当用户点击时，类将被移除，并在 setTimeout 时间后添加类（仅一次），因为我们在添加类后使用了 clearInerval()。

注意：

在我的情况下，我首先添加了类来进行动画，然后再将其删除。

希望这清楚并能帮助某些人；虽然问题发布日期已经很晚了。

祝一切顺利！

- Salwa Manosur