Alguien sabe como solucionar esto?
Solo quiero hacer una animación simple usando js/css donde el objeto comienza en el medio de la pantalla. Al presionar la tecla de flecha derecha o izquierda, el objeto se mueve a cualquier lado de la pantalla durante unos segundos y luego regresa al centro de la pantalla.
Por alguna razón puedo golpear a la derecha y va a la derecha y regresa al medio y la izquierda va a la izquierda y regresa al medio.
Sin embargo, cuando presiono la izquierda dos veces seguidas o la derecha dos veces seguidas, no se activará en la segunda pulsación de tecla.
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%;} }El problema que tiene en su lógica es que su evento de tecla abajo está agregando un estilo para provocar la animación. Cuando hace clic en la misma tecla, se aplica el mismo estilo, por lo tanto, no hay cambios. Funciona bien cuando alterna porque el estilo se actualiza. Una solución rápida sería usar una función setTimeout para eliminar el estilo después de que se complete la animación, o borrar los estilos y luego agregarlos cada vez para restablecer la animación.
Puede hacer esto para borrar los estilos:
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} } }Está configurando la animación y luego volviéndola a configurar, pero el sistema no la vuelve a ejecutar porque no ha habido cambios en el estilo.
Puede escuchar el evento animationend y borrar el estilo de animación cuando finaliza.
Aquí hay un fragmento simple:
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>