Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen
|
Während des Projekts habe ich begonnen, die js requestAnimationFrame-Methode zu verwenden, um den Fortschrittsbalken zu implementieren. Dies beeinträchtigte die Leistung jedoch erheblich, wenn viele Daten vorhanden waren. Daher habe ich CSS zur Implementierung und Optimierung verwendet. Fügen Sie zuerst den Code ein:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<style type="text/css">
*{Rand: 0;Padding: 0}
.box{Breite: 100px;Höhe: 10px;Randradius: 10px;Hintergrund: #999;Rand: 100px auto;Rand: 1px durchgezogen #ff6780;}
.child{position: relative;höhe:100%;border-radius:erben;}
.process-animate{Hintergrund: #ff6780;Position: absolut;links: 0;oben: 0;unten: 0;border-radius:erben;
Animation: Ablauf 1s linear vorwärts;
}
@keyframes-Prozess
{
0 %{
links: 0; rechts: 100 %;
}
20 %
rechts:80%
}
40 %
rechts: 60 %;
}
60 % {right: 40 %;}
80 % {right: 20 %;}
100 % {rechts: 0;}
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div class="child" style="width:50%"> // Der Prozentsatz des untergeordneten Elements ist der Anteil des Fortschrittsbalkens<p class="process-animate"></p>
</div>
</div>
</body>
</html>Effektdiagramm (kopieren Sie den Code, um den dynamischen Effekt anzuzeigen):
Normalerweise muss der Prozentsatz auf Grundlage der Hintergrunddaten berechnet werden, sodass er dynamisch übergeben wird. Der Vue-Code wird unten veröffentlicht Unterkomponente des Fortschrittsbalkens (progress.vue):
<Vorlage>
<div Klasse="Prozess-Wrapper" :Klasse="{'addGray':addGray}">
<div Klasse="Prozess-Kind" ref="Prozess-Kind">
<p class="Prozess-Animation" :class="{'addGray':addGray}"></p>
</div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Requisiten: {
hinzufügenGray: {
//Grauer Typ: Boolean,
Standard: false
},
Fortschrittsbreite: {
//Prozentsatz des Fortschrittsbalkens, Typ: Zahl,
Standard: 0
}
},
montiert() {
dies.$nextTick(() => {
Konsole.log(dies.addGray, "addGray---");
this.$refs.processChild.style.width = this.progressWidth + "%"; //Fortschrittsbalken dynamisch ändern// this.$refs.processChild.style.width = 90 + "%"; Testeffekt});
}
};
</Skript>
<style lang="scss" scoped>
.Prozess-Wrapper {
Breite: 1,98rem;
Höhe: 0,13rem;
Rand: 0,12rem 0 0,1rem 0;
Randradius: 0,1rem;
Hintergrund: #fff;
Rand: 0,01rem durchgezogen #ff6780;
&.addGray {
Hintergrund: #999;
Rand: 0,01rem durchgezogen Nr. 999;
}
.Prozess-Kind {
Position: relativ;
Höhe: 100%;
// Breite: 100 %; //Diese Breite ändert sich dynamisch. Rahmenradius ändern: durch js vererben;
.Prozess-Animation {
Hintergrund: #ff6780;
Position: absolut;
links: 0;
oben: 0;
unten: 0;
Rahmenradius: erben;
Animation: Ablauf 1s linear vorwärts;
&.addGray {
Hintergrund: #999 !wichtig;
// Rand: 0,01rem durchgezogen #999;
}
}
}
}
@keyframes verarbeiten {
0% {
links: 0;
rechts: 100%;
}
20% {
rechts: 80%;
}
40 % {
rechts: 60%;
}
60 % {
rechts: 40%;
}
80 % {
rechts: 20%;
}
100 % {
rechts: 0;
}
}
</Stil>Übergeordnete Komponentenaufrufe: <!-- Fortschrittsbalken --> <Fortschritt :addGray="inaktiv" :progressWidth="progressWidth"></Fortschritt> Sehen Sie die tatsächliche Wirkung:
vorbei; verwendet CSS perfekt, um den Leistungsverbrauch der rekursiven JS-Animation zu lösen. Dies ist das Ende dieses Artikels über die Verwendung von CSS3 zum Erzielen von Fortschrittsbalkeneffekten und zum dynamischen Hinzufügen von Prozentsätzen. Weitere relevante CSS3-Fortschrittsbalken zum Hinzufügen dynamischer Prozentinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung
>>: Detaillierte Beschreibung des HTML-Meta-Viewport-Attributs
Artikel empfehlen
MySQL-Datenbankterminal – allgemeine Befehlscodes für Vorgänge
Inhaltsverzeichnis 1. Benutzer hinzufügen 2. Ände...
So verbergen und entfernen Sie Bildlaufleisten in HTML
1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...
Detaillierte Erklärung der Firewall-Regeleinstellungen und Befehle (Whitelist-Einstellungen)
1. Firewall-Regeln festlegen Beispiel 1: Port 808...
css3-Animation, Ballrollen, js-Steuerung, Animationspause
Mit CSS3 können Animationen erstellt werden, die ...
Detaillierte Erläuterung der Schritte zur Verwendung von ElementUI in tatsächlichen Projekten
Inhaltsverzeichnis 1. Selbstsortierung der Tabell...
Grundlegende Verwendung des Befehls wget unter Linux
Inhaltsverzeichnis Vorwort 1. Laden Sie eine einz...
So verwenden Sie den Linux-Paste-Befehl
01. Befehlsübersicht Der Einfügebefehl fügt die e...
Lösung für den Fehler beim Mounten des freigegebenen Docker-Verzeichnisses unter Windows 10
Ursache Beim Ausführen des Docker-Skripts tritt e...
So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen
Inhaltsverzeichnis Fazit zuerst Frage Lösung Verw...
Detaillierte Erklärung zum Erstellen einer Phalcon-Umgebung unter einem Nginx-Server auf einem CentOS7-System
Dieser Artikel beschreibt, wie man eine Phalcon-U...
vsCode generiert Vue-Vorlagen mit einem Klick
1. Verwenden Sie die Tastenkombination Strg + Ums...
Beispiel für die Einrichtung und Verwendung des HTML-Floating-Frames (Iframe lädt HTML)
Code kopieren Der Code lautet wie folgt: <!DOC...
Vue verwendet benutzerdefinierte Anweisungen, um Wasserzeichen am unteren Seitenrand hinzuzufügen
Projektszenario Fügen Sie dem gesamten Hintergrun...
Diskussion über CSS-Stilpriorität und kaskadierende Reihenfolge
Im Allgemeinen : [1 wichtige Flagge] > [4 beson...
Beheben Sie den Gruppierungsfehler Ausdruck Nr. 1 der SELECT-Liste ist nicht in der GROUP BY-Klausel enthalten und enthält nicht aggregierte Werte in MySQL-Versionen über 5.7
Grund: MySQL 5.7.5 und höher implementiert die Er...