Wie kann verhindert werden, dass CSS-Übergänge beim Laden der Seite in Chrome ausgelöst werden?

Unterdrückung der Initiierung von CSS-Übergängen beim Laden der Seite

In bestimmten Situationen können CSS-Übergänge beim Laden der Seite unbeabsichtigt aktiviert werden, was dazu führt, dass Elemente flackern. Dieses Problem kann beim Anwenden von Farbübergängen auf Elemente auftreten.

Gemäß dem bereitgestellten Beispiel:

CSS:

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

p.green:hover {
   color: yellow;
}

HTML:

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

Beim Laden der Seite wird der Text innerhalb des

Element geht von Schwarz (der Anfangsfarbe) nach Grün über. Dieses Verhalten ist unerwünscht und kann optisch störend sein.

Um diesen unbeabsichtigten Übergang zu verhindern, besteht eine Lösung darin, einen einzigartigen Aspekt des Verhaltens von Chrome zu nutzen. Wenn eine Seite ein enthält Element löst Chrome CSS-Übergänge vorzeitig aus. Durch das Hinzufügen eines einzelnen Leerzeichens innerhalb eines Skript-Tags kann das Vorhandensein dieses Elements emuliert und so der fehlerhafte Übergang unterdrückt werden:

<script> </script>

Diese einfache Problemumgehung behebt den Fehler in Chrome, indem ein Leerzeichen < Formular> Element, das die unnötige Einleitung von Übergängen während des Ladens der Seite verhindert.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass CSS-Übergänge beim Laden der Seite in Chrome ausgelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!