Ich versuche einen Ladeeffekt auf die Seitenladung durch CSS3-Breitenübergang zu erreichen. Hier ist die Demo .
HTML
%Vor%CSS
%Vor%Es funktioniert nicht wie erwartet. Ich brauche den Übergang, wenn die Seite geladen wird.
Aber wenn ich das Element überprüfe und das width
des Bereichs überprüfe / deaktiviere, bekomme ich den Effekt.
Wie wirkt sich das beim Laden der Seite aus?
Wenn Sie die Klasse aus dem Bereich entfernen und in JavaScript setzen, wendet der Browser den Übergang an, aber das funktioniert nur beim ersten .skill-bar
. Auch .getElementsByClassName
funktioniert nicht in IE8 oder darunter.
HTML
%Vor%JavaScript
%Vor% (also einfach in <script>
element nach dem HTML umbrechen oder siehe run Funktion beim Laden der Seite
Sie möchten wahrscheinlich eine jQuery (oder andere Framework) -Lösung, um die browserübergreifende Kompatibilität zu gewährleisten, die jedoch eine Abhängigkeit vom Framework einführt. Wenn du jQuery schon mit einbaust, dann toll. Wenn nicht, müssen Sie zuerst diese Bibliothek einschließen und dann verwenden:
jQuery
%Vor%Klicken Sie mit der rechten Maustaste auf den Ausgabe-Frame und wählen Sie Frame-Quelle anzeigen , um den Ausgabe-Code zu sehen.
Tags und Links javascript html jquery css3 css-transitions