Verhindert, dass der CSS-Übergang beim Laden der Seite ausgelöst wird

Question 1

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)

Question 2

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 .

Question 3

@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 CSStransition Deklaration, 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.

Question 4

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>

Question 5

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.

Platzieren Sie das CSS der betreffenden Elemente in einem <style>Tag in der Kopfzeile Ihrer HTML-Datei. Der Fehler tritt nur auf, wenn das CSS von einem externen Stylesheet aufgerufen wird.
Legen Sie die betreffenden Elemente in einen flexboxBehälter. Dies behebt auch den Fehler.

Question 6

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.

Question 7

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.

Question 8

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

Question 9

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