Ich habe ein Problem mit der CSS- transitionEigenschaft, die beim Laden der Seite ausgelöst wird.
Das Problem ist, dass beim Anwenden von a color transitionauf ein Element (z. B. transition: color .2s:) beim ersten Laden der Seite meine Elemente von Schwarz auf die zugewiesene Farbe blinken.
Angenommen, ich habe den folgenden Code:
CSS
p.green {
color: green;
transition: color .2s;
-moz-transition: color .2s;
-webkit-transition: color .2s;
-o-transition: color .2s;
}
p.green:hover {
color: yellow;
}
HTML
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<p class="green">The Flashing Text</p>
</body>
</html>
Beim Laden der Seite p.greenverblasst mein Wille von blackbis green.
Ich möchte den Farbübergang :hovernicht auf die Pseudoklasse anwenden, da dies den Übergang auf MouseLeave nicht anwenden würde .
Es ist wirklich ärgerlich, wenn der Text über die Webseite blinkt. Bis zu diesem Moment habe ich es vermieden, Übergänge zu verwenden, es sei denn, ich brauche sie wirklich, und trotzdem verwende ich sie mit Sorgfalt. Es wäre großartig, wenn es eine wirklich offensichtliche Lösung dafür gibt, die ich nicht sehe!
Dies geschieht in Google Chrome. Ich habe nicht in anderen Browsern getestet.
jsfiddle.net/ShyZp/2 (danke @Shmiddty)
quelle
window.onload = function(){document.body.className += " loaded";}body.loaded p.green{transition:color .2s;}Antworten:
In Chrome gibt es einen Fehler , der dazu führt, dass CSS-Übergänge ausgelöst werden, wenn die Seite ein
<form>Element enthält.Eine einfache Lösung besteht darin, der Fußzeile der Seite ein Skript-Tag hinzuzufügen, das ein einzelnes Leerzeichen enthält.
<script> </script>Sie können dem Fehler unter https://crbug.com/332189 und https://crbug.com/167083 folgen .
quelle
<script async src="main.js"></script>am Ende meines Dokuments. Durch Entfernen desasyncAttributs wurden die unerwünschten Übergänge beim Laden der Seite behoben. 👍deferauf meinem<script>Tag und das Entfernen löste mein Problem. Danach habe ich das Skript einfach an den unteren Rand des Dokuments verschoben.<head>von meinem Dokument so , dass mein CSS enthalten war , bevor mein JavaScript statt , nachdem es; Ich habe den Fehler buchstäblich behoben, indem ich mein Google Analytics-<script>Tag verschoben habe. In Chrome gibt es eindeutig Probleme mit den Rennbedingungen oder dem Timing, die durch die Verzögerung behoben werden können, die durch die Interpretation von JS verursacht wird, obwohl mir die genaue Mechanik ein Rätsel ist.<body>Tags. Ich habe das hinzugefügt<link rel="preload" href="main.css" as="style">,<head>damit es immer noch sofort heruntergeladen wird.@Shmiddty Kommentare zu dieser Frage ließen mich nachdenken, also habe ich mit dem Code herumgespielt und eine Lösung gefunden.
Das Problem liegt in den
headerErklärungen. Durch Umkehren der Reihenfolge der externen CSS- und JS-Dateiaufrufe, dh das CSS vor das JS stellen, werden die Farbübergänge beim Laden der Seite nicht mehr ausgelöst:<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/main.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="js/main.js"></script> </head>Ich vermute, dass das Laden von JS das Laden des CSS verzögert hat, nachdem das DOM bereit war. Zu diesem Zeitpunkt (wie von @Shmiddty vorgeschlagen) wurde dem Text bereits die Standardfarbe des Browsers zugewiesen und er verwendete dann mein CSS
transitionDeklaration, um in seine gestaltete Farbe einzublenden.** Ich bin mir immer noch nicht sicher, ob dies der am besten geeignete Weg ist, aber es funktioniert. Wenn jemand eine bessere Lösung hat, kann er diese gerne hinzufügen oder bearbeiten.
quelle
Fügen Sie Ihrem CSS hinzu:
.css-transitions-only-after-page-load * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }Fügen Sie Ihrer globalen JavaScript-Datei Code hinzu:
$(document).ready(function () { $(".css-transitions-only-after-page-load").each(function (index, element) { setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10); }); });Jetzt können Sie jedes Element auf Ihrer Seite mit der Klasse css-transitions-only-after-page-load markieren :
<div class="container css-transitions-only-after-page-load"> ... </div>quelle
Der beste Weg, um dieses Problem zu lösen, ist die Verwendung des leeren
<script>Fixes mit einem Leerzeichen in den Antworten auf dieser Seite. Ich habe jedoch zwei andere Möglichkeiten gefunden, um dieses Problem zu lösen.<style>Tag in der Kopfzeile Ihrer HTML-Datei. Der Fehler tritt nur auf, wenn das CSS von einem externen Stylesheet aufgerufen wird.flexboxBehälter. Dies behebt auch den Fehler.quelle
nienn veröffentlicht die lösung . Das Problem liegt im Dokumentenkopf und wo / wie Sie Ihre Stylesheets laden. Es ist ähnlich wie bei "Header können nicht geändert werden, sie werden bereits gesendet" in PHP, außer dass HTML / CSS / Webkit keinen Fehler auslöst.
Ich hatte genau dieses Problem, las Nienns Beitrag und überprüfte meinen Kopf. Hier waren meine Inhalte zuvor.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <html lang="en"> <meta name="description" content="A website for me to do whatever I want with." > <title>My title</title> <link rel="stylesheet" type="text/css" href="/mD/media/foot.css"> <link rel="stylesheet" href="mD/media/head.css" type="text/css"> </head>Beachten Sie, dass ich kein JS lade. Beachten Sie auch, wie ich die Stylesheet-Seite nach Angabe des Titels geladen habe. Nachdem die Stylesheet-Verweise nach hinten verschoben wurden, funktionierte es wie ein Zauber. Das Endergebnis sah folgendermaßen aus:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <html lang="en"> <meta name="description" content="A website for me to do whatever I want with." > <link rel="stylesheet" type="text/css" href="/mD/media/foot.css"> <link rel="stylesheet" href="mD/media/head.css" type="text/css"> <title>My title</title> </head>Es ist nicht nur Javascript, das dieses Problem verursachen kann, sondern auch der Site-Titel. Ich denke, eine gute Faustregel ist CSS> JS> Site-Titel.
quelle
Die akzeptierte Antwort hat mir nicht geholfen. In Google Chrome gibt es einen Fehler , der vermieden werden kann, indem der Seite ein Skript hinzugefügt wird . Sogar ein leeres Skript löst das Problem.
quelle
<script>Tags den DOM-Elementen folgen, mit denen das Problem auftritt. Ich würde empfehlen, es einfach am Ende Ihrer Seite zu platzieren.Sie können Ihrer HTML-Datei einfach ein leeres Skript-Tag hinzufügen.
So was:
<script type="text/javascript"></script>Es sollte jedoch mindestens ein Zeichen enthalten. Entweder Leerzeichen oder neue Zeile (\ n) oder Kommentar (//) oder was auch immer
<script type="text/javascript"> </script> <script type="text/javascript"> </script> <script type="text/javascript">//</script>Oder verknüpfen Sie einfach eine JS-Datei mit Ihrer HTML-Datei
<script type="text/javascript" src="js/script.js"></script>Sie können das Skript-Tag an einer beliebigen Stelle platzieren. In der Kopf- oder Körpermarke .
Dieses Problem tritt nur während der Entwicklung auf, da in der endgültigen Situation einer Website definitiv eine JS-Datei vorhanden ist
quelle
Haben Sie versucht, verschiedene Übergangseigenschaften zu verwenden? Sowie:
-moz-transition: color .2s; /* Firefox 4 */ -webkit-transition: color .2s; /* Safari and Chrome */ -o-transition: color .2s; /* Opera */Hat in Chrome gut funktioniert.
EDIT: Sie haben die Frage zu Browsern bereits beantwortet. Sie sollten versuchen, -webkit-transform zu verwenden
quelle