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%;}
}
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}
}
}
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>