Timerbalken in CSS mit benutzerdefinierten Eigenschaften

Vor kurzem muss ich einen sichtbaren Timer im Projekt implementieren, und es gibt bereits ein ähnliches Timer -UI -Design im Projekt als Referenz. Benutzer müssen nicht sehen, dass die Anzahl abnimmt, sondern möchten, dass eine "Balken" allmählich von voll auf leer abnehmen. Ich habe dies erwähnt, weil es viele Möglichkeiten gibt, die "Timer" -Ver Benutzeroberfläche zu implementieren. In diesem Artikel geht es nicht um all diese Methoden (die Suchergebnisse auf CodePen wären hilfreicher), sondern um eine, die für mich sehr gut funktioniert.

Die Art von Timer, die ich brauche, ist die sogenannte "Turn -Time" -Balken im Projekt. Die Durchführung einer Aktion kann die Drehzeit auslösen, und die meisten nachfolgenden Aktionen werden bis zum Ende der Kurvenzeit blockiert. Daher ist ein klarer Red Bar -Timer die richtige UI -Wahl. Es gibt den Menschen ein Gefühl von Rhythmus und Fluss, Sie können die Endzeit des Timers "fühlen" und Ihre nächste Operation planen.

Das Einstellen dieses Timers ist ziemlich einfach ...

Lassen Sie uns eine Eltern -Kind -Elementstruktur erstellen, falls wir in Zukunft die leeren Teile des Behälters stylen müssen.

<div>
  <div></div>
</div>

Jetzt stylen wir nur die inneren Bars.

 .Round-Time-Bar Div {
  Höhe: 5px;
  Hintergrund: Linear-Gradient (bis unten, rot, #900);
}

Dies gibt uns eine schöne rote Bar, die als Zeitanzeige verwendet werden kann.

Als nächstes müssen wir es herunterzählen lassen, aber hier müssen wir die Funktionalität berücksichtigen. Ein solcher Timer muss wissen, wie lange es dauert! Wir können diese Informationen direkt in HTML bereitstellen. Dies bedeutet nicht, dass wir es vermeiden , JavaScript zu verwenden - wir nehmen es an . Wir sagen: "Hey, JavaScript, bitte geben Sie uns eine Dauervariable und wir werden den Rest bewältigen."

<div style="--duration: 5;">
  <div></div>
</div>

Tatsächlich ist dieser Ansatz sehr geeignet für das moderne DOM -Handling -JavaScript. Solange --variable ist korrekt, kann es das DOM-Element jederzeit erneut rendern, und wir können sicherstellen, dass das Design diese Situation gut behandelt. Wir werden eine solche Variation machen.

Beginnen wir nun die Animation. Die gute Nachricht ist, dass es einfach ist. Dies ist ein einzelner Keyframe:

 @Keyframes Roundtime {
  Zu {
    /* Effizienter als Animation `width`*/
    Transformation: scalex (0);
  }
}

Wir können den Balken "komprimieren", weil der Stil der Stange nicht komprimiert aussieht, wenn wir horizontal skalieren. Wenn wir das tun, können wir die Breite animieren. Dies ist kein so großes Problem, zumal es das Layout von irgendetwas anderem nicht neu einstellen kann.

Jetzt wenden wir es an die Bar an:

 .Round-Time-Bar Div {
  / * ... */
  Animation: Roundtime Calc (var (-Dauer) * 1S) Schritte (var (-Dauer)) vorwärts;
  Transform-Ursprung: linker Zentrum;
}

Sehen Sie, wie wir die Variable --duration verwenden, um die Animationsdauer festzulegen? Dies leistet den größten Teil der Arbeit. Ich benutze es auch, um die gleiche Anzahl von steps() so festzulegen, dass es "Gitter durch Gitter" verringert. "Bid-by-Frame" mag ein visueller UI-Effekt sein, den Sie mögen (ich mag), aber es passt sich auch an die Idee, dass JavaScript diese Balken jederzeit erneut übertragen kann, und Bid-by-Frame macht es unwahrscheinlich, dass es es bemerkt. Ich habe eine Ganzzahl als Dauerwert verwendet, damit beide ihn so verwenden können.

Wenn Sie jedoch eine reibungslose Animation wünschen, können wir dies beispielsweise tun:

<div ...="" data-style="smooth"></div>

Verwenden Sie dann keine steps :

 .
  Animation: Roundtime Calc (var (-Dauer) * 1S) Lineare Vorwärts nach;
}

Beachten Sie, dass wir auch lineare Animationen verwenden, was für den Timer sinnvoll zu sein scheint. Die Zeit wird es nicht erleichtern. Oder wird es? Wie auch immer, das ist Ihre Wahl. Wenn Sie einen Timer wünschen, der an bestimmten Stellen nach Beschleunigung oder Verzögerung aussieht, machen Sie es.

Wir können dieselbe data-attribute -basierte API verwenden, um Farbänderungen zu implementieren:

 .Round-Time-Bar [daten-color = "blau"] div {
  Hintergrund: Linear-Gradient (nach unten, #64b5f6, #1565c0);
}

Die letzte Variante besteht darin, die Breite jeder "Sekunde" zu reparieren. Auf diese Weise sieht ein 10-Sekunden-Timer länger aus als ein 5-Sekunden-Timer:

 .Round-Time-Bar [Data-Style = "behoben"] div {
  Breite: Calc (var (-Dauer) * 5%);
}

Hier ist eine Demonstration:

Achten Sie auf die Tipps zum Neustarten von CSS -Animationen.

Oh, übrigens, ich weiß, es gibt einen<meter></meter> Element, es mag semantischer sein, aber seine eigene Benutzeroberfläche kann nicht animieren, wie ich es hier möchte - zumindest nicht, um sie zu bekämpfen. Aber ich weiß nicht, ob es zugänglicher ist? Dekliert es seinen aktuellen Wert auf nützliche Weise? Wenn wir JavaScript verwenden, um in Echtzeit zu aktualisieren<meter></meter> Wäre es ein zugänglicherer Timer? Wenn jemand weiß, kann ich hier eine Lösung verknüpfen.

Das obige ist der detaillierte Inhalt vonTimerbalken in CSS mit benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!