按键点击后过渡效果无法移除及keyCode弃用问题求助

过渡效果无法移除的核心原因 #

代码里监听过渡结束事件时写错了事件名：transitioned应该是**transitionend**——这是CSS过渡完成后触发的标准事件。之前的代码因为事件名错误，removeTransition函数从未被执行，导致.playing类一直留在元素上，过渡效果无法恢复。

修复这一行：

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

keyCode弃用的替代方案 #

keyCode已被标准弃用，推荐用以下两种方案替代，需对应调整JS逻辑或HTML属性：

方案一：保留原数字data-key，用字符ASCII码匹配 #

无需修改HTML，通过e.key.charCodeAt(0)获取按键字符的ASCII码，和原data-key的数字值匹配：

window.addEventListener('keydown', function(e) {
  const keyCode = e.key.charCodeAt(0);
  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${keyCode}"]`);
  
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
});

方案二：用按键字符匹配，修改HTML的data-key #

1. 将HTML中所有元素的data-key改为对应大写字母，比如data-key="65"改为data-key="A"，data-key="83"改为data-key="S"，以此类推。
2. 修改JS选择逻辑，用e.key.toUpperCase()匹配：

window.addEventListener('keydown', function(e) {
  const keyChar = e.key.toUpperCase();
  const audio = document.querySelector(`audio[data-key="${keyChar}"]`);
  const key = document.querySelector(`.key[data-key="${keyChar}"]`);
  
  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
});

完整修正后的代码（方案一） #

window.addEventListener('keydown', function(e) {
  const keyCode = e.key.charCodeAt(0);
  const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${keyCode}"]`);

  if (!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
});

function removeTransition(e) {
  if (e.propertyName !== 'transform') return;
  this.classList.remove('playing');
}

const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

额外注意事项 #

• CSS中.key的transition: all .07s设置正确，能正常触发transitionend事件；
• 浏览器要求音频播放需由用户交互触发，当前通过keydown事件触发符合规范。

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