为什么键事件会导致过渡过渡？

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 转换。