Javascript keydown won't call function twice on same key, must alternate keys, simple animation

Question

Anybody know to resolve this?

I just want to do a simple animation using js/css where the object starts in the middle of the screen. Upon right or left arrow keypress, the object then moves to either side of the screen for a few seconds and then returns to the middle of the screen.

For some reason I can hit right and it goes right and returns to the middle and left goes left and returns to the middle.

However, when I hit left twice in a row or right twice in a row, it won't trigger on the second keypress.

document.addEventListener('keydown', keyDownHandler, false); 
  function keyDownHandler(event) {
    if(event.keyCode == 39) {
        falcon.style.animation = "move_right 3s";
    }
    else if (event.keyCode == 37) {
        falcon.style.animation = "move_left 3s";
    }
}

CSS:

@keyframes move_right {
    0% { left: 40%;}
    50% { left: 80%;}
    100% {left: 40%;}
}

@keyframes move_left {
    0% { left: 40%;}
    50% { left: 0%;}
    100% { left: 40%;}
}

score 0 · Answer 1 · answered Jul 18 '22 at 17:23

0

The issue you are having in your logic is that your key down event is adding a style to cause the animation. When you click on the same key the same styling is applied thus no change. It works fine when you toggle because the style is updated. A quick fix would be to use a setTimeout function to remove the style after the animation completes, or to clear the styles then add them each time to reset the animation.

You can do this to clear the styles:

document.addEventListener('keydown', keyDownHandler, false); 
  function keyDownHandler(event) {
    if(event.keyCode == 39) {
        falcon.style.animation = "move_right 3s";
        setTimeout(()=>{falcon.style.animation = "" },3000}
    }
    else if (event.keyCode == 37) {
        falcon.style.animation = "move_left 3s";
        setTimeout(()=>{falcon.style.animation = "" },3000}
    }
}

answered Jul 18 '22 at 17:23

Colin Hale

824
5
11

But what if someone clicks on the button even before the animation is complete ? – Pratik Wadekar Jul 18 '22 at 17:27
I suspected that was the issue but I didn't know how to resolve it, I am new to JS. I tried the clear() method but that didn't seem to work. Thank you very much! – Matthew Weems Jul 18 '22 at 17:29
I suspect that I will be on here again to resolve that issue too Pratik! :) – Matthew Weems Jul 18 '22 at 17:30
@PratikWadekar I would view that more as a behavior choice. Are we wanting the animation to finish or restart if someone clicks it again? If we want it to restart we can set the falcon.style.animation="" before setting it again. – Colin Hale Jul 18 '22 at 17:31
@MatthewWeems Could you create provide your code in some codepen so that we are clear as to what you are trying to animate. – Pratik Wadekar Jul 18 '22 at 17:34

score 0 · Answer 2 · answered Jul 18 '22 at 17:38

You are setting the animation then setting it again, but the system doesn't rerun it because there has been no change to the style.

You can listen for the animationend event and clear the animation style when it finishes.

Here's a simple snippet:

function clearAnimation() {
  falcon.style.animation = "";
}
const falcon = document.querySelector('.falcon');
document.addEventListener('animationend', clearAnimation);
document.addEventListener('keydown', keyDownHandler, false);

function keyDownHandler(event) {
  if (event.keyCode == '39') {
    falcon.style.animation = "move_right 3s";
  } else if (event.keyCode == 37) {
    falcon.style.animation = "move_left 3s";
  }
}

.falcon {
  position: relative;
}

@keyframes move_right {
  0% {
    left: 40%;
  }
  50% {
    left: 80%;
  }
  100% {
    left: 40%;
  }
}

@keyframes move_left {
  0% {
    left: 40%;
  }
  50% {
    left: 0%;
  }
  100% {
    left: 40%;
  }
}

<div class="falcon">FALCON</div>

Javascript keydown won't call function twice on same key, must alternate keys, simple animation

2 Answers2