Maison > interface Web > js tutoriel > le corps du texte

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 ?

Susan Sarandon
Libérer: 2024-10-31 21:00:02
original
714 Les gens l'ont consulté

Why does my CSS transition not start or trigger the callback function, and how can I fix it using a 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>
Copier après la connexion
<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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!