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

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-31 20:20:02431parcourir

How to Prevent CSS Transitions from Triggering on Page Load in 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!

Déclaration:
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