Trigger CSS3 übergang auf die Seite laden

Ich versuche zu erreichen, laden Einfluss auf das laden der Seite durch CSS3 Breite übergang.
Hier ist die demo.

HTML

<div class="skill-bar">
    <span class="w70"></span>
</div>

CSS

.skill-bar {
    width: 57%;
    float: left;
    height: 11px;
    border-radius: 5px;
    position: relative;
    margin: 6px 0 12px 0;
    border: 2px solid #00edc2;
}
.skill-bar span {
    background: #00edc2;
    height: 7px;
    border-radius: 5px;
    display: inline-block;
}
.skill-bar span.w70 {
    width: 70%;
}
.skill-bar span {
    width: 0;
    transition: width 1s ease;
    -webkit-transition: width 1s ease;
    background-color: #00edc2;
}

Seine nicht funktioniert wie erwartet. Ich muss den übergang zu passieren, wenn die Seite geladen wird.

Aber wenn ich element untersuchen und aktivieren/deaktivieren Sie die width der Spanne, bekomme ich den Effekt.

How, um den gleichen Effekt beim laden der Seite?

Trigger CSS3 übergang auf die Seite laden

  • CSS-übergänge für änderungen in den Parametern. Wenn Sie möchten, dass der übergang auf laden, dann müssen Sie etwas ändern, die beim laden der Seite. Dies kann leicht getan werden mit JavaScript, aber ich bin mir nicht bewusst eine andere Methode, ohne Sie.
  • Bitte können Sie mir sagen, wie es getan werden kann, mit JS ?
  • Könnten Sie Stil mit der ursprünglichen Breite mit CSS. Mit JS, haben eine Funktion ausgeführt, die beim laden der Seite, ändert die Breite auf die endgültige Breite, die Sie wollen. CSS-übergang mit der animation zwischen den beiden Breite von Staaten, so müssen Sie nur sorgen über das ändern der Breite mit JS.
  • Verwenden Sie eine animation statt, ein übergang.
  • Können Sie mir helfen, in meiner Geige? Ich scheine zu verlieren, der track irgendwo. 🙁
  • Hier gehen Sie: jsfiddle.net/ySj7t
  • Sie sollte hinzufügen, dass, als eine Antwort
  • danke, es ist getan.

InformationsquelleAutor Ajey | 2014-03-28
  1. 17

    Können Sie erreichen, die Wirkung ohne JavaScript und ohne Kompatibilitätsprobleme mit CSS animation:

    <div class="skill-bar">
    <span class="w70"></span>
</div>
    .skill-bar {
    width: 57%;
    float: left;
    height: 11px;
    border-radius: 5px;
    position: relative;
    margin: 6px 0 12px 0;
    border: 2px solid #00edc2;
}
.skill-bar span {
    background: #00edc2;
    height: 7px;
    border-radius: 5px;
    display: inline-block;
}
.skill-bar span {
    animation: w70 1s ease forwards;
}
.skill-bar .w70 {
    width: 70%;
}
@keyframes w70 {
    from { width: 0%; }
    to { width: 70%; }
}

    Fiddle für webkit: http://jsfiddle.net/ySj7t/

    • Viel schöner Ansatz mit animation
    • Wenn Sie möchten, um die Verzögerung der animation animation-delay scheint nicht zu funktionieren. Stattdessen ändern Sie Ihre @keyframes so etwas wie @keyframes w70 { 0% { width:0%;} 50% {width: 0%;} 100% {width:70%;}} dies bedeutet, dass die animation verzögert für 0,5 s (50% von der animation Dauer).
    • Auch wenn die Breite unbekannt ist, oder legen Sie einen anderen Weg, Sie zu animieren max-width....
    InformationsquelleAutor MatTheCat
  2. 1

    Durch entfernen der Klasse aus dem span und setzen es in JavaScript die browser werden Sie den übergang anwenden, aber das funktioniert nur auf der ersten .skill-bar. Auch .getElementsByClassName funktioniert nicht in IE8 oder unten.

    HTML

    <div class="skill-bar"><span></span></div>

    JavaScript

    document.getElementsByClassName('skill-bar')[0].getElementsByTagName('span')[0].className = 'w70';

    (also nur wickeln Sie diese in <script> element nach dem HTML-oder sehen run-Funktion, wenn die Seite geladen ist

    Reine JavaScript-demo

    Möchten Sie wahrscheinlich ein jQuery (oder ein anderes framework) Lösung für cross-browser-Kompatibilität, aber das führt in eine Abhängigkeit von den Rahmenbedingungen. Wenn man jQuery schon damals toll. Wenn nicht, werden Sie brauchen, dass Sie diese Bibliothek zuerst erstellen und dann verwenden:

    jQuery

    $(window).load(function(){
    $('.skill-bar span').addClass('w70');
});

    jQuery demo

    Rechten Maustaste auf die Ausgabe-Frames, und wählen Sie View frame source zu sehen, der Ausgabe-code.

    InformationsquelleAutor andyb
  3. 1

    Fügen Sie die Klasse durch javascript:

    $(".skill-bar span").addClass("w70");

    Siehe fiddle hier.

    • Die Geige entspricht nicht dem code in der Antwort
    • Sie haben Recht, Feste
    InformationsquelleAutor lante
Schreibe einen Kommentar