为什么关键事件会导致快速转换

Question

我不明白为什么两次快速按钮单击会导致显示的div 从其最后一个位置缓慢过渡到初始位置(如我所愿(，而是两个快速键事件使其捕捉到初始位置。

在下面的代码中，按钮单击和窗口键事件最初将div 向右转换 500px。在下一次射击时，他们将其带回原始位置。快速射击将导致div 快速移动到右侧的某个位置并再次返回。

只需单击两个按钮，我就不会遇到任何问题。但是通过两次快速的右箭头键点击，我注意到了活泼的行为。任何建议都将不胜感激，因为我找不到对这种奇怪行为的任何解释。

var ele = document.getElementById("f");
var key = true;
var buttons = document.getElementsByTagName("button")
var counter = 0;
var c = [0,500];
function demo() {
    counter = !counter + 0;
    navigateSlider();
}
// code to account for KEY
if (key) {
   window.onkeydown = function (e) {
      console.log(e.keyCode);      
      if (e.keyCode == 39) {
         buttons[0].click();
      }
   }
}
function navigateSlider() {
   ele.style.transition = "1s ease";
   ele.style.transform = "translateX(" + c[counter] + "px)";
}

<div id="f" style="background-color: grey; border-radius: 10px;border: 1px solid black; padding: 50px;display: inline-block"></div>
<br><br>
<button onclick="demo()">Go Right</button>

Answer 1

不能确切地说出原因，但如果您触发点击事件并超时为"0"，效果会更好。

if (e.keyCode == 39) {
    setTimeout(function(){
        buttons[0].click();
    }, 0);
}

处理键盘事件似乎以某种方式中断了Chrome和Firefox中的CSS过渡。