La transición CSS no se inicia o la devolución de llamada no se invoca

Resumen del problema

La posición de un elemento HTML se actualiza mediante transiciones CSS. Sin embargo, la transición no se activa o la función de devolución de llamada no se invoca a pesar de agregar un detector de eventos de transición de transición. Este problema se puede resolver ajustando el cambio con setTimeout(1ms).

Explicación de la solución

La razón detrás de este comportamiento radica en el proceso de renderizado del navegador. Antes de que el navegador pueda aplicar la transición CSS, primero debe aplicar los estilos en línea al elemento. Si el elemento aún no está en el DOM, su visualización de estilo calculado se establece en "".

Cuando se establece el nuevo estilo, el navegador aún no ha aplicado el estilo en línea. Por lo tanto, el estilo calculado del elemento permanece como "", con sus valores izquierdo y superior todavía en 0px.

En consecuencia, cuando la propiedad de transición se aplica antes de pintar el siguiente cuadro, los valores izquierdo y superior ya son los deseados.

Para resolver este problema, se puede forzar un reflujo usando el getter Element.offsetHeight u otros métodos DOM que requieren estilos actualizados. . Esto obliga al navegador a actualizar los estilos antes de aplicar la transición, lo que garantiza una implementación fluida.

Ejemplo

El siguiente código demuestra el problema y su solución alternativa:

document.body.innerHTML  = tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

animdiv.style.backgroundColor = 'green';
Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});

En este ejemplo, el captador offsetTop del elemento animdiv se utiliza para forzar un reflujo antes de que se actualice su posición. Esto garantiza que la transición CSS se active correctamente y se invoque la función de devolución de llamada.