前端问题1：当我常按按键之后，样式去不掉了，为什么？

Question

前端问题1：当我常按按键之后，样式去不掉了，为什么？
这是一个架子鼓项目，当我们按指定键的时候，playing类名会添加到指定的元素上，并且播放特定的音效。当然，我们并不希望该playing类名所对应的元素一直都存在，所以又添加了一个新的响应事件针对动画完成的完成的时候，去掉该类名。

但是，当我常按按键一段时间后，该样式去不掉了，为什么？

该项目来自于Javascript30，github地址
关键部分如下所示:

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

  function removeTransition(e) {
    if (e.propertyName !== 'transform') {
      return;
    }
    e.target.classList.remove('playing');
  }
 const keys = Array.from(document.querySelectorAll('.key'));
 keys.forEach(key => key.addEventListener('transitionend', removeTransition));

Answer 1

该回答引用ChatGPT4与博主@晓码自在合作编写：

这是一个常见的前端问题。原因是:

当你快速连续触发 transitionend 事件时,浏览器无法在事件触发之间移除 .playing 类。所以该类仍然存在,样式也就不会消失。

有几种解决方法:

1. 使用定时器移除类名

在 transitionend 事件里设置一个定时器,延迟移除类名。例如:

js
function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  setTimeout(() => e.target.classList.remove('playing'), 200); 
}

200ms的延时可以给浏览器足够的时间在两次事件之间移除类名。

1. 检查类名存在直接移除

在 transitionend 事件中首先检查 .playing 类名是否存在,存在才移除:

js
function removeTransition(e) {
  if (e.propertyName !== 'transform' || !e.target.classList.contains('playing')) 
    return;
  e.target.classList.remove('playing');
}

这可以避免在类名已经被移除后再次移除引起的错误。

1. 使用transitioncancel事件

transitioncancel 事件会在新 transition 启动时取消现有的 transition。可以这样使用:

js
keys.forEach(key => {
  key.addEventListener('transitionend', removeTransition);
  key.addEventListener('transitioncancel', removeTransition);
})

transitioncancel 事件可以确保在新一轮 transition 触发前,旧的 transition 和类名已被移除。

这些是解决重复快速触发 transition 而导致类名无法被移除的常用方法。我个人推荐使用 选项2,在事件中首先检查类名是否存在,这是一种简单高效的解决方案。