Блог

Главная - Вопросы по программированию - Почему ключевое событие вызывает быстрые переходы?

Почему ключевое событие вызывает быстрые переходы?

#javascript #css #css-transitions

#javascript #css #css-переходы

Вопрос:

Я не могу понять, почему два быстрых нажатия на кнопку заставляют показанный div медленно переходить из его последней позиции в исходную позицию (как я хочу), но два быстрых ключевых события заставляют его привязываться к начальной позиции.

В следующем коде нажатие кнопки и событие window key изначально перемещают 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>

Комментарии:

1. IE11 на этот раз делает это правильно

2. Кроме того, использование ‘keyup’ делает процесс менее резким

3. Но что, если мне нужно использовать событие keydown

4. Вы можете использовать ‘keydown’, смотрите Мой ответ ниже. Я пытался сузить причины такого поведения и обнаружил, что на ‘keyup’ это влияет меньше. Итак, это должно быть какое-то внутреннее действие браузера, связанное с событием ‘keydown’, которое блокирует анимацию.

5. Я не знаю, могут ли другие люди проверить правки вопроса, но если вы проверите один из фрагментов в правках этого вопроса, он работает отлично, с тем же кодом, что и выше.

Ответ №1:

Не могу точно сказать, почему, но если вы запускаете событие click с таймаутом ‘0’, это работает лучше.

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

Определенно кажется, что обработка событий клавиатуры каким-то образом прерывает CSS-переходы в Chrome и Firefox.