Pourquoi ma transition CSS ne démarre-t-elle pas ou ne déclenche-t-elle pas la fonction de rappel, et comment puis-je la corriger à l'aide d'un setTimeout ?

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 de 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 comme "", 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 des styles à jour. . 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 de contournement :

<code class="html"><div id="spanky"
  style="position: absolute;
    left: 10px;
    top: 10px;
    background-color: blue;
    width: 20px;
    height: 20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div></code>

<code class="js">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"
});</code>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!