Pourquoi ma transition CSS ne fonctionne-t-elle pas avec les styles en ligne et comment puis-je y remédier ?

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

Problème :

Dans un projet de jeu basé sur JavaScript, les tentatives visant à remplacer les animations jQuery par des transitions CSS pour les mouvements de projectiles se sont révélées infructueuses. Les transitions ont été ignorées ou n'ont pas déclenché le rappel, même avec l'application d'un délai setTimeout.

Explication :

Ce comportement se produit car le navigateur n'a pas appliqué styles CSS en ligne avant d'appliquer les propriétés de transition. Lorsque le nouveau style est défini, le style calculé de l'élément a toujours des valeurs par défaut pour les positions d'affichage, de gauche et du haut.

Étant donné que les valeurs de gauche et du haut restent à 0px (leurs valeurs par défaut), la transition n'a rien à voir car les valeurs correspondent à celles définies dans le nouveau style. Pour remédier à cela, une redistribution du navigateur doit être forcée pour mettre à jour les styles avant d'appliquer la transition.

Solution :

Pour forcer une redistribution du navigateur, utilisez Element.offsetHeight getter. Par exemple :

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

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

Cette étape garantit que le style calculé de l'élément est à jour et que la transition sera appliquée comme prévu.

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!