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

Suppression du lancement de la transition CSS lors du chargement de la page

Dans certaines situations, les transitions CSS peuvent s'activer par inadvertance lors du chargement de la page, provoquant le scintillement des éléments. Ce problème peut survenir lors de l'application de transitions de couleurs sur des éléments.

Selon l'exemple fourni :

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

Lors du chargement de la page, le texte dans le

l’élément passe du noir (la couleur initiale) au vert. Ce comportement est indésirable et peut être visuellement perturbateur.

Pour éviter cette transition involontaire, une solution consiste à exploiter un aspect unique du comportement de Chrome. Lorsqu'une page contient un élément, Chrome déclenche les transitions CSS prématurément. En ajoutant un caractère d'espacement unique dans une balise de script, la présence de cet élément peut être émulée, supprimant ainsi la transition erronée :

<script> </script>

Cette solution de contournement simple résout le bogue dans Chrome en fournissant un espace < formulaire> élément, empêchant le lancement inutile de transitions pendant le chargement de la page.

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!