Información general
Trabajando en la creación de mi propio carrusel. La idea es que la imagen se acerque lentamente al comienzo de cada "página" del carrusel.

El Problema Para lograr el resultado que busco, todo lo que tengo que hacer es cambiar la escala de la imagen de fondo usando una transición. Simplemente envuélvalo en un contenedor con overflow:hidden y funciona. El problema es que la siguiente página del carrusel debe comenzar con su imagen "alejada". Por lo tanto, la escala debe establecerse en 1 nuevamente. Sin embargo, dado que la clase CSS tiene la transición, alejarse no es instantáneo.

La solución a ese problema debería ser simplemente eliminar la clase del elemento. Luego cambie la escala y finalmente agregue la clase nuevamente. Sin embargo, por alguna razón, eso no parece funcionar.

Otro problema es que scale parece tener un soporte de navegador muy malo en este momento: https://caniuse.com/?search=scale

Código de ejemplo

 let scaled = false; const test = document.getElementById("test"); window.addEventListener("click", function() { if(scaled) { // Remove the class test.classList.remove("foo"); scaled = false; // Reset the scale test.style.transform = "scale(1)"; // Add class back in making sure the animation should be updated window.requestAnimationFrame(() => { test.classList.add("foo"); }); } else { // Leave the animation running scaled = true; test.style.transform = "scale(0.5)"; } })

 .foo { width: 500px; height: 500px; background: blue; transition: transform 2s; }

 <div id="test" class="foo"> </div>

Tendrá que ejecutar el recorte anterior en Firefox o Safari, ya que la escala no es compatible con otros navegadores en este momento.

En el primer clic, la animación se reproduce como debería. En el segundo clic, la animación aún se reproduce cuando no debería, ya que se eliminó la clase.

Mis preguntas
¿Hay alguna forma alternativa de lograr el mismo efecto? (así que no use la escala en absoluto) ¿Por qué se reproduce la animación de todos modos a pesar de que se eliminó la clase?