Wenn Sie jemals CSS-Übergänge auf Strukturelementen Ihrer Seite verwendet haben, haben Sie vielleicht festgestellt, dass dieser Übergang beim Laden der Seite und beim Layout stattfindet.
Kurzes Video des Problems, das ich hatte
Um es zu beheben, habe ich dem `body`-Element einfach die Klasse "preload" hinzugefügt.
<body class="preload">Dann sicherstellen, dass keine Übergänge stattfinden
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}Dann diese Klasse beim Laden der Seite entfernt
$(window).load(function() {
$("body").removeClass("preload");
});Funktionierte ziemlich gut. Es wäre schön, Animationen/Übergänge beim Laden der Seite ohne JavaScript verhindern oder auslösen zu können, aber leider.
Schön :) und nur 10+ Zeilen Code. Vielen Dank. Übrigens benötigen Sie möglicherweise eine AJAX-Ladeanzeige, um die Tatsache anzuzeigen, dass die Seite geladen wird. Sie können sie von http://preloaders.net erhalten
Haben Sie diesen Effekt auf dem Frosch oben rechts verwendet? :)
+1
Ja! Nur irgendwie umgekehrt (löst aus statt zu verhindern).
Warum nicht CSS-Animationen verwenden? Sie bräuchten kein JavaScript.
Die andere Option ist, wenn Sie Typekit verwenden, was heutzutage nicht jeder tut? Dann können Sie die von Typekit angewendeten Klassen für den Body verwenden, wie z. B. `wf-loading` oder `wf-active`, und etwas CSS, um einen Lade-Spinner anzuzeigen, wenn die Seite noch nicht vollständig gerendert ist. So schlagen Sie zwei Fliegen mit einer Klappe: Sie verhindern FOUT und bewahren Animationen. Wenn Sie Beispiele suchen, schauen Sie sich die Website von Dan Eden an, dort finden Sie großartige Beispiele für Animationen und wunderschöne Schriftarten, und er ist außerdem der Erfinder des unglaublich erstaunlichen animate.css
Sehr schön, aber erklären Sie bitte, woran Sie dort gerade gearbeitet haben. (Fiddle?)
Ich bin mir nicht ganz sicher, ob es richtig ist, das CSS am Ende der Seite einzufügen oder nicht. Aber ich denke, wir können den Übergang am Ende der Seite platzieren, damit der Übergangseffekt zumindest initiiert werden kann, wenn die Seite ziemlich bereit ist
????????????????????????????????????????
Sie können den Stil nicht am Ende platzieren, aber Sie könnten ein Skript platzieren, das den Stil ändert.
Ein Hinweis: Einige Browser verstehen `none` in der `transition`-Eigenschaft nicht. Ich musste `transition:all 0s linear;` (mit Präfixen) verwenden, damit es vollständig verschwindet.
Hallo Chris,
Ich verwende denselben Effekt, um den Inhalt auf meiner Website beim Laden der Seite einzublenden. Anstatt jedoch eine Klasse vom Body zu entfernen, füge ich sie hinzu ("`.loaded`"). Auf diese Weise kann ich solche Effekte auf verschiedenen Elementen der Seite auslösen.
Standardmäßig haben wir also
Und nach dem Laden der Seite
Den Effekt können Sie hier sehen: http://betterhtml.com
Ich denke, es gibt keinen Unterschied zwischen unseren Ansätzen, da das Endergebnis dasselbe ist.
Hallo Chris und Andru,
Ich sehe den Effekt auf Ihrer Website, großartig.
Ist Opazität gleich Sichtbarkeit?
Und nach dem Laden der Seite
Hallo Farzin,
Gute Frage. Sie können keine Übergänge für die Sichtbarkeit verwenden, da sie nicht animiert werden kann. Sie hat nur die 2 Zustände: sichtbar oder unsichtbar. Deshalb müssen Sie die Opazität verwenden.
Schön, das gefällt mir. Ich habe an einer sehr überdachten Lösung dafür in einem Projekt gearbeitet und es ist schön zu sehen, dass es so einfach gehandhabt werden kann #bookmarked!
Verspätete Antwort, aber was war die alternative Lösung?
Warum nicht das Gegenteil tun?
Das bedeutet, alle Übergänge in einer separaten CSS-Auswahl zu haben
Body.loaded .element { transition-1: xyz;}
Dann die Klasse "loaded" hinzufügen, wenn das DOM bereit ist.
Das ist raffiniert.
Möglicherweise sage ich Offensichtliches, aber das bedeutet, dass Sie ohne aktivierte JS keine schicken Übergänge haben. Vielleicht wäre es sinnvoll, die Klasse per JS zum Body hinzuzufügen?
Netter Trick, danke
Ja, ich habe den Effekt des Frosches oben bemerkt, er ist wirklich großartig.
Es gibt einen Tippfehler im allerersten Wort des Artikels. Ich glaube, Sie meinten "If you've..." und nicht "I've you've...".
Sie hätten auch eine Erzählung hinzufügen sollen. Ich war anfangs verwirrt, was das Problem ist.
Danke fürs Teilen, ich habe auch ein ähnliches Problem :)
Ein weiteres Beispiel dafür, warum wir nie damit anfangen hätten sollen, Dinge mit CSS zu animieren. Natürlich haben Leute mit einer Anhängerschaft, die unfähig oder unwillig ist, die bereits vorhandenen Werkzeuge dafür zu lernen, genug Schwung hinter dieser albernen Bewegung gebracht, dass es wahrscheinlich zu spät ist, etwas umzukehren.
Chris, exzellenter Beitrag, ich habe den anfänglichen Effekt auf dem Frosch bemerkt, clever, ich bin immer noch gespannt, wohin sich CSS entwickelt, mach weiter so
Ich bin ziemlich neu in CSS, aber ich muss sagen, dass sich mein Wissen durch Ihren Blog und Treehouse allein in einem Monat verzehnfacht hat.
Sie könnten so etwas wie http://jsfiddle.net/PEEKt/ machen
Sie können ein zusätzliches (viertes) Argument übergeben, um Ihren gewünschten Effekt zu verzögern.
Das einzige, wovor ich warnen möchte, sind Bilder. Wenn Ihre App/Website Bilder hat, reicht die zweisekündige Verzögerung möglicherweise nicht aus. Der Effekt wird immer noch ausgeführt, während das Bild heruntergeladen wird. Oder auch Benutzer mit langsameren Verbindungen.
Es könnte also sinnvoll sein, dies nach dem Auslösen des `load`-Ereignisses zu verwenden.
Nur eine weitere Möglichkeit, es zu tun.
Schön. Der Treehouse-Frosch-Trick erklärt.
Danke!
Hallo
Ausgezeichneter Artikel wie immer, aber er ist genau der Artikel, den ich in diesem Moment brauchte.
Ich habe eine kleine CSS3-Animation durchgeführt und sie wird vor dem vollständigen Laden der Seite ausgelöst.
Ich habe versucht, Ihren jQuery-Code hinzuzufügen, aber ich denke, ich brauche ein wenig jQuery für Dummies (es ist das erste Mal, dass ich jQuery-Code hinzufüge, Entschuldigung).
Ich habe das jQuery im Head und die Klasse "preload" im Body-Tag hinzugefügt
” (…)
$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});
(…)”
Der Tag "preload" wird jedoch nicht entfernt.
Ich glaube, ich habe die Art und Weise, wie ich die jQuery-Bibliothek verknüpfe oder die jQuery-Funktion aufrufe, falsch gemacht, aber ich sehe es jetzt nicht. Irgendeine Hilfe? Vielen Dank.
Entschuldigung, der von mir zitierte Code wurde möglicherweise von Spam entfernt.
Die von mir hinzugefügte jQuery-Bibliothek ist Version 3.2.2 von googleaplis.
Entschuldigung für die Mühe, das meinte ich
“(…)
„
Hallo Dave,
Ein Ratschlag
Versuchen Sie, Ihre JavaScript-Dateien und Skripte am Ende der Seite zu platzieren, kurz vor dem schließenden `body`-Tag, anstatt im Head. Wenn die Seite geladen wird, ist Ihre Priorität, zuerst den Inhalt und die Stile zu laden und dann das JS.
Es sei denn, Sie verwenden ein Skript wie Modernizr, das sofort ausgeführt werden muss.
Was Ihren Code angeht, versuchen Sie, die Anführungszeichen bei "window" zu entfernen.
Hallo Andru
Vielen Dank, ich habe die Anführungszeichen bei 'window' entfernt und es funktioniert jetzt.
Außerdem werde ich studieren, wie man JS-Code vor `</body>` platziert.
Mit freundlichen Grüßen,
Gern geschehen, Dave. Freut mich, dass es jetzt funktioniert!
$(“window”).load(function() {
$(“body”).removeClass(“preload”);
});
coole Methode, die ich benutzt habe.
Haha, das ist gut, ich habe den Effekt des Frosches oben bemerkt, er ist wirklich großartig.
Hey Andru! Der Treehouse-Frosch-Trick ist gut erklärt.
Danke!
Danke für diese Lösung, aber wenn Sie Prefix Free verwenden, funktioniert sie nicht mehr : (
Wäre es nicht 95% effektiv, JEDEN Layout- oder kritischen Übergang mit
body:hover #target_elem:hover { transition: … }?
Schließlich gibt es eine 90%ige Chance, dass die Maus über der Seite ist, wenn sie geladen wird, und noch mehr Chancen, dass der Besucher sie betrachtet, wenn der Zeiger sich bewegt. (Wenn sich der Zeiger nicht bewegt, gibt es mehr Chancen, dass der Besucher dem Bildschirm keine Aufmerksamkeit schenkt.)
Wäre es auch nicht besser, herauszufinden, WARUM Übergänge überhaupt ausgelöst werden? Sie werden standardmäßig nicht beim Laden ausgelöst. Nur wenn sich die Eigenschaft geändert hat.
:hover würde auf vielen Touch-Geräten nicht funktionieren.
Sie haben jedoch Recht. Ich denke, das Warum ist hier ziemlich wichtig, und ich habe es hier nirgendwo diskutieren sehen. Ich habe das Gefühl, es ist ein Browser-Fehler.
Ich verwende genau dasselbe HTML & CSS für das Element, das von diesem Problem betroffen ist. Ich habe versucht, alles andere HTML auszuschneiden, um zu sehen, ob das etwas zeigt, und siehe da, der Ladeübergang tritt nicht auf.
Ich melde mich wieder, wenn ich es behoben habe.