Animationsnummer -Zähler

CSS Digitale Animation beispielsweise stellen Sie sich eine Nummer vor, die sich von 1 auf 2 wechselt, dann von 2 auf 3 wechselt und dann von 3 auf 4 usw. wechselt und eine bestimmte Zeit dauert. Es ist wie ein Zähler, wird aber von derselben Animation gesteuert, mit der wir Animationen im Web entwerfen. Dies kann bei der Gestaltung von Dingen wie Dashboards nützlich sein und den Zahlen eine gewisse Vitalität verleihen. Überraschenderweise ist dies jetzt in CSS ohne viel Fähigkeit möglich. Sie können einfach direkt zur neuen Lösung springen, wenn Sie möchten, aber zuerst sehen wir sehen, wie wir es in der Vergangenheit gemacht haben.

Eine eher logische Möglichkeit zu Animationsnummern besteht darin, die Zahlen durch JavaScript zu ändern. Wir könnten ein ziemlich einfaches SetInterval machen, aber hier ist eine erweiterte Antwort, die eine Funktion verwendet, die den Startwert, den Endwert und die Dauer akzeptiert, sodass Sie sie eher wie eine Animation behandeln können:

Wenn wir nur CSS verwenden, können wir den CSS -Gegenstand verwenden, um die Zahlen zu animieren, indem wir die Zählungen in verschiedenen Keyframes anpassen:

Eine andere Möglichkeit besteht darin, alle Zahlen in einer Reihe zu leiten und ihre Positionen zu animieren, wobei nur eine Nummer jeweils angezeigt wird:

Einige der doppelten Code in diesen Beispielen können Präprozessoren wie PUG (für HTML) oder SCSS (für CSS) verwenden, die Schleifen bereitstellen, um sie einfacher zu verwalten, aber den nativen Code für Zwecke absichtlich verwenden, damit Sie die Grundidee sehen können.

Neue CSS -Lösung

Mit der neuesten Unterstützung für CSS.registerProperty und @Property können wir CSS -Variablen animieren . Der Trick besteht darin, CSS -benutzerdefinierte Eigenschaften als Ganzzahlen zu deklarieren. Auf diese Weise können Sie sie wie jede andere Ganzzahl interpolieren (z. B. in einer Konvertierung).

 @property -num {
  Syntax: '<integer> ';
  Anfangswert: 0;
  Erben: Falsch;
}

div {
  Übergang: -num 1s;
  Gegenauflistung: num var (-num);
}
Div: Hover {
  -Num: 10000;
}
div :: nach {
  Inhalt: Zähler (num);
}</integer>

Wichtiger Hinweis: Zum Zeitpunkt des Schreibens wird diese @Property-Syntax nur durch Chrom (und andere Chromkernbrowser wie Edge und Oper) unterstützt, sodass sie nicht mit Kreuzbrowser kompatibel ist. Wenn Sie eine Nur-Chrome-App (z. B. die Elektronen-App) erstellen, können Sie sie sofort verwenden, da sonst warten. Die oben erwähnte Demo hat eine breitere Unterstützung.

Die CSS -Inhaltseigenschaft kann verwendet werden, um Nummern anzuzeigen, aber wir müssen noch Zähler verwenden, um Nummern in Zeichenfolgen umzuwandeln, da der Inhalt nur ausgeben kann<string></string> Wert.

Sehen Sie, ob wir die Animation wie jede andere Animation lindern können? Super cool!

Typed CSS -Variablen können auch in @KeyFrames verwendet werden:

Ein Nachteil? Die Zähler unterstützen nur Ganzzahlen. Dies bedeutet, dass Dezimalstellen und Brüche nicht berücksichtigt werden. Wir müssen den ganzzahligen Teil und den Dezimalteil auf irgendeine Weise separat anzeigen.

Können wir Dezimalstellen animieren?

Sie können Dezimalstellen (wie -number) in Ganzzahlen umwandeln. So funktioniert es:

1. Registrieren Sie einen<integer></integer> CSS-Variable (z. B. Integer) und den Anfangswert angeben.
2. Verwenden Sie dann Calc (), um rund zu runden:-Integer: Calc (var (-Nummer)).

In diesem Fall rundet -Nummer zum nächsten Ganzzahl und speichert das Ergebnis -Integer.

 @Property -Integer {
  Syntax: "<integer> ";
  Anfangswert: 0;
  Erben: Falsch;
}
-Nummer: 1234,5678;
-Integer: Calc (var (-Nummer)); / * 1235 */</integer>

Manchmal brauchen wir nur ganzzahlige Teile. Es gibt eine clevere Möglichkeit, dies zu tun:-Integer: max (var (-Nummer)-0,5, 0). Dies gilt für positive Zahlen. Diese Methode erfordert nicht einmal Calc ().

 / * @Property -Integer *//
-Nummer: 1234,5678;
-Integer: max (var (-Nummer)-0,5, 0); / * 1234 */

Wir können das fraktionelle Teil ähnlich extrahieren und es dann mit einem Zähler in eine Zeichenfolge konvertieren (denken Sie jedoch daran, dass der Inhaltswert eine Zeichenfolge sein muss). Verwenden Sie die folgende Syntax, um die angeschlossene Zeichenfolge anzuzeigen:

 Inhalt: "String1" var (-string2) counter (-Integer) ...

Hier finden Sie ein vollständiges Beispiel für die Animation mit Dezimalprozentsätzen:

Andere Tipps

Da wir CSS -Zähler verwenden, kann das Format dieser Zähler in anderen Formaten als Zahlen vorliegen. Hier ist ein Beispiel, um den Buchstaben "CSS" in "Ja" zu animieren!

Oh, und ein weiterer Trick: Wir können den Wert des benutzerdefinierten Attributs über JavaScript debuggen:

 GetComputedStyle (Element) .GetPropertyValue ('-Variable')

Das war's! Die heutigen CSS -Funktionen sind erstaunlich.

Das obige ist der detaillierte Inhalt vonAnimationsnummer -Zähler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!