Transição CSS não iniciada ou retorno de chamada não invocado

Resumo do problema

A posição de um elemento HTML é atualizada usando transições CSS. No entanto, a transição não é acionada ou a função de retorno de chamada não é chamada, apesar da adição de um ouvinte de evento de transição transactionend. Esse problema pode ser resolvido envolvendo a alteração com um setTimeout(1ms).

Explicação da solução

A razão por trás desse comportamento está no processo de renderização do navegador. Antes que o navegador possa aplicar a transição CSS, ele deve primeiro aplicar os estilos embutidos ao elemento. Se o elemento ainda não estiver no DOM, sua exibição de estilo computado será definida como "".

Quando o novo estilo for definido, o navegador ainda não aplicou o estilo embutido. Portanto, o estilo computado do elemento permanece como "", com seus valores esquerdo e superior ainda em 0px.

Consequentemente, quando a propriedade de transição é aplicada antes da próxima pintura do quadro, os valores esquerdo e superior já são os desejados uns, resultando em nenhuma transição para executar e nenhum acionamento do evento transactionend.

Para resolver esse problema, um refluxo pode ser forçado usando o getter Element.offsetHeight ou outros métodos DOM que exigem estilos atualizados . Isso força o navegador a atualizar os estilos antes de aplicar a transição, garantindo uma implementação tranquila.

Exemplo

O código a seguir demonstra o problema e sua solução 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"
});

Neste exemplo, o getter offsetTop do elemento animdiv é usado para forçar um refluxo antes que sua posição seja atualizada. Isso garante que a transição CSS seja acionada corretamente e a função de retorno de chamada seja invocada.