Bootstrap-Fortschrittsbalken wird nicht animiert
Ich habe den Bootstrap in meiner Rails 4 -Anwendung mit dem Rubin-Juwel installiert.
Ich habe den Code für einen animierten Fortschrittsbalken kopiert und direkt aus bootstraps docs in meine Seite eingefügt:
%Vor% Aber die Bar animiert nicht. Das einzige, was mir einfällt, ist die Tatsache, dass ich die Farbe des Balkens in den Variablen sass geändert habe.
Warum animiert es nicht?
Bearbeiten
Wie meine Bar aussieht:
Bearbeiten
Hier wird das CSS angewendet, wenn ich die Klasse active verwende:
4 Antworten
Es ist nur so, dass die durchscheinenden weißen Streifen ( rgba(255,255,255,.15) ) in bestimmten Farben nicht angezeigt werden.
Nimm den Chrome-Browser yellow . Wenn wir diese Farbe in Photoshop verwenden, legen Sie einen weißen Streifen mit der Deckkraft 0,15 darauf, es ist nicht sichtbar. Ich habe hier den Umriss drauf gelegt, damit Sie sehen können, wo der Streifen ist.
Bei bestimmten Farben müssen Sie möglicherweise das Alpha der Streifenfarbe anpassen. Ich habe eine Klasse von .progress-bar-primary zum .progress-bar hinzugefügt, ähnlich wie Sie .progress-bar-warning etc hinzufügen würden.
Dann für das .progress-bar-primary , ändern Sie einfach das Alpha des Streifens nach Ihrem Geschmack. Für Chrome Yellow habe ich die Deckkraft .75 verwendet.
Ersetzen Sie class="bar" durch class="progress-bar" .
Platzieren Sie die Keyframes css am Anfang Ihrer CSS-Datei, nicht verschachtelt (wenn Sie sass verwenden) und fügen Sie sie nicht in eine Medienabfrage ein.
Haben Sie tatsächlich versucht, Ihre Änderungen an den Farben zurückzusetzen? Wenn nicht, kann es sich lohnen, das zu versuchen, um zu sehen, ob es Ihr Problem ist.
Wenn das nicht der Fall ist, schlage ich vor, Sie sollten es zurück auf Lager setzen und dann nur isolieren es selbst und sehen, wie es geht. Es kann ein Problem mit anderen Inhalten im HTML oder etwas anderes confliting sein, wenn Sie es in ein leeres Dokument mit Lagereinstellungen laden.
Ich kann im Moment an nichts anderes denken. Ich hoffe, es funktioniert.
Tags und Links twitter-bootstrap twitter-bootstrap-3