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

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

Mary-Kate Olsen
Libérer: 2024-10-31 20:20:02
original
446 Les gens l'ont consulté

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;
}
Copier après la connexion
HTML:

<p class="green">The Flashing Text</p>
Copier après la connexion

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>
Copier après la connexion

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!

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!