Trigger CSS3-Übergang beim Laden der Seite

8

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?

    
Ajey 28.03.2014, 16:37
quelle

3 Antworten

16

Sie können den Effekt ohne JavaScript und ohne Kompatibilitätsprobleme mit CSS-Animation erreichen:

%Vor% %Vor%

Fiddle für das Webkit: Ссылка

    
MatTheCat 28.03.2014, 17:10
quelle
1

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

Reine JavaScript-Demo

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%

jQuery-Demo

Klicken Sie mit der rechten Maustaste auf den Ausgabe-Frame und wählen Sie Frame-Quelle anzeigen , um den Ausgabe-Code zu sehen.

    
andyb 28.03.2014 16:59
quelle
1

Fügen Sie die Klasse über JavaScript hinzu:

%Vor%

Siehe Geige hier .

    
lante 28.03.2014 16:57
quelle