La transition CSS ne démarre pas ou le rappel n'est pas invoqué

Résumé du problème

La position d'un élément HTML est mise à jour à l'aide de transitions CSS. Cependant, la transition ne parvient pas à se déclencher ou la fonction de rappel n'est pas invoquée malgré l'ajout d'un écouteur d'événement transitionend de transition. Ce problème peut être résolu en encapsulant la modification avec un setTimeout(1ms).

Explication de la solution

La raison derrière ce comportement réside dans le processus de rendu du navigateur. Avant que le navigateur puisse appliquer la transition CSS, il doit d'abord appliquer les styles en ligne à l'élément. Si l'élément n'est pas encore dans le DOM, son style d'affichage calculé est défini sur "".

Lorsque le nouveau style est défini, le navigateur n'a pas encore appliqué le style en ligne. Par conséquent, le style calculé de l'élément reste "", avec ses valeurs gauche et supérieure toujours à 0px.

Par conséquent, lorsque la propriété de transition est appliquée avant la prochaine peinture du cadre, les valeurs gauche et supérieure sont déjà celles souhaitées. ceux-ci, ce qui n'entraîne aucune transition à effectuer et aucun déclenchement de l'événement transitionend.

Pour résoudre ce problème, une redistribution peut être forcée à l'aide du getter Element.offsetHeight ou d'autres méthodes DOM qui nécessitent styles actuels. Cela oblige le navigateur à mettre à jour les styles avant d'appliquer la transition, garantissant ainsi une mise en œuvre fluide.

Exemple

Le code suivant illustre le problème et sa solution :

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"
});

Dans cet exemple, le getter offsetTop de l'élément animdiv est utilisé pour forcer une redistribution avant que sa position ne soit mise à jour. Cela garantit que la transition CSS se déclenche correctement et que la fonction de rappel est invoquée.