为啥关键事件会导致快速转换？

Posted 2023-03-05

【中文标题】为啥关键事件会导致快速转换？

【英文标题】：Why the key event causes snappy transitions?为什么关键事件会导致快速转换？

【发布时间】：2019-08-15 21:08:49

【问题描述】：

我不明白为什么两次快速 按钮 点击会导致显示的 div 从其最后位置缓慢过渡到初始位置（如我所愿），但两次快速 关键事件 使其对齐 到初始位置。

在以下代码中，按钮单击和窗口键事件最初将 div 向右移动 500 像素。在下一次射击时，他们将其带回原来的位置。快速射击会导致 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>

【问题讨论】：

IE11 一次就对了

同时使用“keyup”可以减少颠簸

但是如果我需要使用keydown事件怎么办

您可以使用“keydown”查看我的回答。我试图缩小这种行为的原因，我发现“keyup”受到的影响较小。所以它必须是一些与阻止动画的'keydown'事件相关的内部浏览器操作。

我不知道其他人是否可以查看问题的编辑，但如果您查看此问题的编辑中的一个 sn-ps，它工作得很好，具有相同的代码如上。

【参考方案1】：

无法确切说明原因，但如果您触发“0”超时的点击事件，效果会更好。

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

处理键盘事件肯定会以某种方式中断 Chrome 和 Firefox 中的 CSS 转换。