javascript - 删除按键时的类（按住键后），过渡到异常行为(Remove class on keypress (after key hold), transitionend weird behavior)

Question

I am refactoring JS30 Challange #1.

(我正在重构JS30 Challange＃1。)

When key is pressed script adds a class to an element with a little transform.

(当按下键时，脚本通过一点变换将类添加到元素。)

I want to remove class from an element when transition ends and I made this:

(我想在过渡结束时从元素中删除类，并这样做：)

const KEYS = document.querySelectorAll('.audiobox');
KEYS.forEach(KEY => KEY.addEventListener('transitionend', function() {
  KEY.classList.remove('playing');
}), false);

This code works well but I wanted to clean up this by calling removeTransition function.

(这段代码很好用，但是我想通过调用removeTransition函数来清理它。)

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

const KEYS = document.querySelectorAll('.audiobox');
KEYS.forEach(KEY => KEY.addEventListener('transitionend', removeTransition));

When I press a key script does its job, class is removed when transition ends but the problem is when I hold a key for few seconds class is never removed.

(当我按下按键脚本来完成其工作时，过渡结束时将删除班级，但问题是当我按住按键几秒钟时，班级从未被删除。)

As I mentioned, first solution works really well even when I hold a key, the second one is not fully working, can you tell me why?

(正如我提到的那样，第一个解决方案即使在我握住钥匙的情况下也能很好地工作，第二个解决方案却无法完全发挥作用，您能告诉我为什么吗？)

Here is whole script

(这是整个脚本)

(function() {
  "use strict";

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

  function playAudio(e) {
    let key_code;
    if (e.type === 'keydown') key_code = e.keyCode;
    if (e.type === 'click') key_code = e.target.getAttribute('data-key');
    const KEY   = document.querySelector('.audiobox[data-key="' + key_code + '"]');
    const AUDIO = document.querySelector('audio[data-key="' + key_code + '"]');

    if (!AUDIO) return;

    AUDIO.currentTime = 0;
    AUDIO.play();
    KEY.classList.add('playing');

    const KEYS = document.querySelectorAll('.audiobox');
    KEYS.forEach(KEY => KEY.addEventListener('transitionend', removeTransition));

    // This one is working
    // KEYS.forEach(KEY => KEY.addEventListener('transitionend', function() {
    //   KEY.classList.remove('playing');
    // }), false);
  }

  window.addEventListener('keydown', playAudio);
  const BOXES = document.querySelectorAll('.audiobox');
  BOXES.forEach(BOX => BOX.addEventListener('click', playAudio));
})();

  ask by Krystian Kupiec translate from so

Answer 1

As discussed in comments,

(如评论中所述，)

remove the check if (e.propertyName !== 'transform') return;

(删除检查if (e.propertyName !== 'transform') return;)

inside the removeTransition function

(在removeTransition函数内部)

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

Working code snippet

(工作代码段)