#javascript #css-transitions
Вопрос:
Если я нажму клавиши со стрелками клавиатуры (следующий/предыдущий), то до завершения перехода я хочу начать с самого начала.
Это должно произойти как в handleNext, так и в handlePrevious
Теперь он не возвращается в исходное положение (если я перейду до завершения перехода), хотя я пытался заставить его:
card.style.transition = ""; card.style.transform = ""; и чем звонить handleMoving() , чтобы снова начать двигаться.
Я тоже пробовал removeEventListener , но происходит что-то странное.
Может быть, как-то удалить transitionend и установить его снова?
ВЕСЬ КОД:
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; } lt;div class="card-wrapper"gt; lt;div id="card" class="card"gt;lt;/divgt; lt;/divgt;