Pourquoi ma transition CSS est-elle ignorée et le rappel ne se déclenche-t-il pas ?

La transition CSS ne démarre pas ou le rappel n'est pas appelé : analyse

Votre problème provient d'une bizarrerie dans les transitions CSS et du navigateur processus de rendu. Initialement, vous insérez du HTML avec des valeurs de position CSS, en définissant une transition sur les propriétés gauche et supérieure. Lors de l'ajout de nouvelles valeurs d'emplacement, vous vous attendiez à une transition, mais elle a été ignorée sans déclencher de rappel.

Curieusement, l'ajout d'un setTimeout de 1 ms pour envelopper le changement de style a initié la transition. Cependant, il arrive parfois que le rappel ne soit pas déclenché. Ce comportement peut être attribué au timing du navigateur.

Explication :

Lorsque le nouveau style est défini, le navigateur n'a pas encore appliqué le style en ligne au style calculé. . Le style calculé de l'élément reste indéfini pour les propriétés left et top, la valeur par défaut étant 0px. Toute transition appliquée ultérieurement correspond simplement aux valeurs définies, ne laissant aucune transition se produire.

Pour résoudre ce problème, une redistribution doit être forcée pour mettre à jour les styles. Cela peut être fait en utilisant le getter offsetHeight ou d'autres méthodes similaires qui déclenchent des redistributions.

Exemple d'utilisation de offsetHeight :

<code class="javascript">let tablehtml = `
<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>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

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

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!