Comment empêcher les transitions CSS de se déclencher lors du chargement de la page dans Google Chrome ?

Empêcher le déclenchement des transitions CSS lors du chargement de la page

De nombreux développeurs Web ont rencontré un problème où les transitions CSS se déclenchaient lors du chargement de la page, provoquant l'apparition d'éléments clignotent avant d’atteindre leur état final. Ce comportement est particulièrement visible lors de l'application de transitions de couleur, car l'élément passe initialement au noir avant de passer à la couleur souhaitée.

Ce problème provient d'un bug dans Google Chrome qui déclenche des transitions chaque fois qu'une page contient un balise au pied de page. Code :

  <script> </script>

Cette solution de contournement empêche efficacement le déclenchement des transitions lors du chargement de la page sans affecter les autres parties de la page.

Vous pouvez également appliquer la transition à l'état de survol et utiliser JavaScript. pour déclencher manuellement la transition au chargement de la page :

<code class="js">window.addEventListener("load", () => {
  const elements = document.querySelectorAll(".green");
  elements.forEach(element => element.classList.add("green-transition"));
});</code>

En résumé, le bug qui provoque l'exécution des transitions CSS au chargement de la page dans Google Chrome peut être atténué en ajoutant une balise de script vide au pied de page ou en initiant manuellement la transition via JavaScript.

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!