Estoy desarrollando una aplicación ReactJs , necesito animar un autobús en una ruta visual.
El autobús debe hacer paradas. Entonces, el bus primero va de A -> B, luego, cuando el usuario hace clic en un botón, va de B -> C, etc.
ya he hecho las animaciones y la logica
.bus_0 { animation: move 3s linear forwards; } .bus_1 { animation: move2nd 3s linear forwards; } @keyframes move { 20% { transform: translate(50px, 0px); } 40% { transform: translate(50px, 0px) rotate(-90deg); } 80% { transform: translate(50px, -130px) rotate(-90deg); } 100% { transform: translate(50px, -125px) rotate(0deg); } } @keyframes move2nd { 20% { transform: translate(100px, 0px); } 40% { transform: translate(100px, 0px) rotate(-90deg); } 100% { transform: translate(100px, -50px) rotate(-90deg); } } Aquí agrego classNames basados en un índice
let bus = document.getElementById('bus'); bus && bus.classList.add(`bus_${data.selectedIndex}`);El problema es que cuando comienza la primera animación, el autobús llega al punto B, pero para la segunda animación, comienza desde el punto A.
Ejemplo: la primera posición del autobús (0, 0), después de la primera animación (100, 100), cuando se reproduce la segunda animación, comienza desde (0, 0), pero necesito que comience desde la última posición alcanzada.
Probablemente debe haber una mejor manera, pero eso es lo que obtuve y creo que resolverá su problema
Así que recopilo las coordenadas x e y de los cuadros cuando se hace clic en el botón de animación y después del evento de finalización de la animación , recopilo las coordenadas x e y nuevamente y calculo la diferencia de ellas y las agrego al estilo del cuadro.
const firstButton = document.querySelectorAll('button')[0]; const secondButton = document.querySelectorAll('button')[1]; const myBox = document.querySelector('div') let rectBefore; let rectAfter; let positionBeforeX; let positionBeforeY; let positionAfterX; let positionAfterY; let differenceX; let differenceY; firstButton.addEventListener('click', () => { rectBefore = myBox.getBoundingClientRect(); positionBeforeX = rectBefore.left; positionBeforeY = rectBefore.top; myBox.classList.toggle('first'); }) secondButton.addEventListener('click', () => { rectBefore = myBox.getBoundingClientRect(); positionBeforeX = rectBefore.left; positionBeforeY = rectBefore.top; myBox.classList.toggle('second'); }) myBox.addEventListener('animationend', (event) =>{ rectAfter = myBox.getBoundingClientRect(); positionAfterX = rectAfter.left; positionAfterY = rectAfter.top; differenceX = positionAfterX - positionBeforeX; differenceY = positionAfterY - positionBeforeY; if(myBox.style.left !== ""){ myBox.style.left = `${parseInt(myBox.style.left.split('px')) + differenceX}px`; myBox.style.top = `${parseInt(myBox.style.top.split('px')) + differenceY}px`; } else{ myBox.style.left = `${differenceX}px`; myBox.style.top = `${differenceY}px`; } myBox.classList.remove(`${event.animationName}`); }) *, *::before, *::after { box-sizing: border-box; } body{ min-height: 100vh; position: relative; display: grid; place-content: center; } button{ position: absolute; background-color: greenyellow; width: 5rem; height: 5rem; } button:nth-of-type(1){ top:5rem; right: 10rem; margin-right: 1rem; } button:nth-of-type(2){ top:5rem; right: 5rem; } .box{ position:relative; width: 100px; height: 100px; background-color: blue; } .first { animation: first 3.0s linear forwards; } .second { animation: second 3.0s linear forwards; } @keyframes first { 20% { transform: translate(50px, 0px); } 40% { transform: translate(50px, 0px) rotate(-90deg); } 80% { transform: translate(50px, -130px) rotate(-90deg); } 100% { transform: translate(50px, -125px) rotate(0deg); } } @keyframes second { 20% { transform: translate(100px, 0px); } 40% { transform: translate(100px, 0px) rotate(-90deg); } 100% { transform: translate(100px, -50px) rotate(-90deg); } } <div class="box"></div> <button>First Animation</button> <button>Second Animation</button>