Si hago clic en las teclas de flecha del teclado (siguiente/anterior), antes de que finalice la transición, quiero comenzar desde el principio.
Eso debería suceder tanto en handleNext como en handlePrevious
Ahora no regresa a la posición base (si navego antes de que termine la transición), aunque traté de forzarlo con:
card.style.transition = ""; card.style.transform = ""; y luego llame a handleMoving() para comenzar a moverse nuevamente.
También probé con removeEventListener , pero está sucediendo algo extraño.
¿Tal vez de alguna manera eliminar la transitionend y configurarla nuevamente?
CÓDIGO COMPLETO:
document.body.onkeydown = handleKeyDown; const card = document.getElementById('card'); let direction; function handleKeyDown(e) { if(e.key === "ArrowRight") handleNext(); if(e.key === "ArrowLeft") handlePrevious(); } function handleNext() { direction = "next" // If I click arrow next/previous before previous transition is finished I want to start from the beginning /* NOT WORKING */ disableTransition(); // Here I want to disable previously transition that is in proccess (probably) removeTransform(); // Remove translateX -2rem or 2rem, be ready from 0px everytime /* END NOT WORKING */ handleMoving(); // Prepared from start, handle moving again } function handlePrevious() { direction = "previous" disableTransition(); removeTransform(); handleMoving(); } function handleMoving() { enableTransition(); addTransform(); } function enableTransition() { card.style.transition = "transform .5s ease-in-out"; } function disableTransition() { card.style.transition = ""; } function addTransform() { card.style.transform = (direction === 'previous') ? "translate3d(-2rem, 0, 0)" : "translate3d(2rem, 0, 0)"; card.addEventListener('transitionend', removeTransform, {once: true}); } function removeTransform() { card.style.transform = ""; } .card { position: absolute; inset: 0; border: 2px solid black; } .card-wrapper { position: relative; width: 300px; height: 150px; background: lightgray; margin: auto; } <div class="card-wrapper"> <div id="card" class="card"></div> </div>