CSS-Fortschrittsbalken animieren, ohne zwischen den Aktualisierungen zu springen?

9

Ich benutze das auf meiner Website ...

%Vor%

Dies ist das gesamte Styling des Elements ...

%Vor%

Es reicht also nur, die Bildschirmbreite von 0 bis 100% unten auf der Seite zu ändern. Der Fortschrittsbalken wird über Javascript aktualisiert.

Da mein Video jedoch nur 30 Sekunden lang ist, werden die einzelnen Schritte der Aktualisierungen als "Sprünge" für den Fortschrittsbalken ausgeführt. Es gibt also keine glatte Bewegung der Leiste.

Irgendeine Idee, wie ich den Fortschrittsbalken animieren oder glatt zwischen den aktualisierten Schritten machen könnte?

UPDATE:

JavaScript ...

%Vor%     
matt 13.12.2014, 14:25
quelle

2 Antworten

1

Sie können es animieren, indem Sie seine value alle 15 millisecond mit setInterval erhöhen und die Inkrementierung stoppen, wenn value größer ist als percentage mit clearInterval .

Dieser Code extrahiert das aktuelle value und inkrementiert es, bis es den Wert percentage erreicht.

Hinweis: percentage wird manuell auf 70 gesetzt.

%Vor% %Vor% %Vor%
    
chipChocolate.py 13.12.2014, 14:44
quelle
1

Das funktioniert perfekt für mich!

%Vor%

Natürlich können Sie den Parameter dur anpassen oder ihn basierend auf der Dauer Ihres Videos sowie dem Parameter seq (je niedriger, glatter) dynamisch abrufen.

Hier ist eine Geige für eine Demo.

    
Marventus 13.12.2014 15:29
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Verwendung von benutzerdefinierten Typanmerkungen in Java