JavaScript点击触发元素闪烁动画仅生效一次的问题求助

我编写了一个JavaScript函数，预期实现点击按钮时让指定元素闪烁1.5秒的效果，但该效果仅能触发一次，再次点击按钮时闪烁动画不会启动。奇怪的是，在开发者工具中添加点击断点并逐步调试时，闪烁效果却能正常出现。

相关代码如下：

JavaScript代码 #

function testFunc(spacerefval) {
  console.log('testFunc was executed!')
  var blinkEl = parent.querySelector('.pin[data-space="' + spacerefval + '"]');
  if (blinkEl.classList.contains('pin--blink')) {
    classie.remove(parent.querySelector('.pin[data-space="' + spacerefval + '"]'), 'pin--blink');
    classie.add(parent.querySelector('.pin[data-space="' + spacerefval + '"]'), 'pin--blink');
  } else {
    classie.add(parent.querySelector('.pin[data-space="' + spacerefval + '"]'), 'pin--blink');
  }
}

CSS代码 #

.pin--blink {
  animation: flicker 1.5s ease-in-out;
}

@keyframes flicker {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    stroke: #a9234d;
  }
  100% {
    opacity: 0;
    stroke: none;
  }
}

解决方法 #

问题根源 #

CSS动画在类首次添加时会执行一次，但如果移除类后立刻重新添加，浏览器的DOM更新队列还没来得及处理移除操作，就接收到了添加类的指令，相当于元素的类状态没有发生实质变化，因此不会重新触发动画。而调试时因为断点暂停了代码执行，给了浏览器足够的时间完成DOM更新，所以动画能正常生效。

修复后的代码 #

优化JavaScript逻辑，利用requestAnimationFrame等待浏览器完成一次重绘后再重新添加类，确保类的状态变化被浏览器识别：

function testFunc(spacerefval) {
  console.log('testFunc was executed!')
  const blinkEl = parent.querySelector('.pin[data-space="' + spacerefval + '"]');
  
  // 先移除闪烁类（即使元素没有该类，remove操作也不会报错）
  blinkEl.classList.remove('pin--blink');
  
  // 等待浏览器下一次重绘前添加类，触发动画
  requestAnimationFrame(() => {
    blinkEl.classList.add('pin--blink');
  });
}

额外优化点 #

• 无需重复调用querySelector，直接复用已获取的blinkEl变量，提升性能
• 去掉冗余的条件判断，不管元素当前是否有闪烁类，统一执行「移除→等待重绘→添加」的逻辑，代码更简洁

内容的提问来源于stack exchange，提问作者Amir