Share
Wenn wir CSS in Diskussionen erwähnen, sprechen wir oft davon, dass es sich um eine gedämpfte Sprache handelt. Eine deklarative Sprache ohne Logik und Einsicht; Aber das ist nicht die wahre Realität. Seit Jahren verlangen Entwickler nach Variablen in Standard-CSS. Sie wurden so lange von Pre-Prozessoren wie LESS und Sass verdorben. CSS-Variablen sind nicht nur eine echte und konkrete Option für Entwickler, sie können auch in Animationsszenarien verwendet werden. Noch skeptisch? Folgen Sie weiter, um mehr zu erfahren!
CSS-Variablen sind gespeicherte Werte, die in einem Stylesheet wiederverwendet werden sollen. Sie sind über den Brauch zugänglich var () Funktion und Einstellung mithilfe der benutzerdefinierten Eigenschaftsnotation.
: root --main-color: goldrute; div Hintergrundfarbe: var (- Hauptfarbe);
Innerhalb definierte Variablen :Wurzel sind global, während in einem Selektor definierte Variablen für diesen Selektor spezifisch sind.
div --Modulfarbe: Goldrute; Hintergrundfarbe: var (- modulfarbe);
Im obigen Beispiel div akzeptiert die Variable, aber wir könnten mit der Verwendung von Targeting-Methoden wie z Klasse und Ich würde zum Beispiel.
Das var () Die Funktion kann auch Fallback-Werte akzeptieren.
.nav Hintergrund: var (- navbg, blau);
Dies kann in Situationen hilfreich sein, in denen eine Variable noch nicht definiert ist oder wenn Sie mit benutzerdefinierten Elementen und dem Schatten-DOM arbeiten.
CSS-Variablen sind noch nicht ganz bereit für die Prime Time, aber die Zukunftsaussichten sind sehr gut, da viele führende Browser die Spezifikation bereits implementieren. Es ist nur eine Frage der Zeit, bis sie bedenkenlos verwendet werden können und die Zeit naht.
Es gibt viele Möglichkeiten, CSS-Variablen mit Animationen zu kombinieren. Denken Sie an Kontexte wie Audiovisualisierungen, JavaScript-ereignisgesteuerte Szenarien und sogar CSS-gesteuerte Ereignisse wie schweben, Fokus und Ziel. Theoretisch könnte eine Apple Watch mit einer API verbunden werden, während eine auf CSS-Variablen basierende Animation eines schlagenden Herzens verwendet wird. Dann haben wir Beschleunigungsmesser, Device Tilt APIs und sogar Gamepad APIs, aber warum sollten wir überhaupt mit CSS-Variablen animieren? Hier sind einige Gründe:
Operationen in CSS sind wirklich der Schlüssel zum gesamten Puzzle mit Animationen. CSS-Funktionen wie calc kann einen Wert zur Laufzeit akzeptieren und Operatoren wie Multiplikation, Division, Addition, Subtraktion ausführen und Werte in neue Werte umwandeln. Dies hilft, CSS-Variablen dynamischer zu gestalten.
Nun, da wir wissen, wie CSS-Variablen aussehen und was sie tun können, ist es an der Zeit zu verstehen, wie JavaScript in all das passt.
Accentsconagua
document.documentElement.style.getPropertyValue ('- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'red'); document.documentElement.style.removeProperty ('- bgcolor');Die oben gezeigten Methoden werden zum Festlegen, Abrufen und Entfernen von Eigenschaftswerten verwendet. Sie können für unsere typischen CSS-Eigenschaften verwendet werden (Hintergrundfarbe, Schriftgröße etc), sie können aber auch für CSS-Variablen verwendet werden. Diese Optionen setzen einen neuen Wert für die global definierte Eigenschaft, die sonst als bekannt ist :Wurzel in CSS.
Sie sind auch das wahre Geheimnis beim Animieren mit CSS-Variablen, da unsere JS-Methoden eine Variable zur Laufzeit dynamisch abrufen, setzen oder entfernen können!
var element = document.querySelector ('div'); element.style.getPropertyValue ('- bgcolor'); element.style.setProperty ('- bgcolor', 'red'); element.style.removeProperty ('- bgcolor');Sie können bei Bedarf auch einen neuen Wert für ein bestimmtes Element festlegen. Im obigen Beispielausschnitt manipulieren wir eine Variable, die an eine angefügt ist div Selektor im Vergleich zu einem globalen Anschluss.
Es gibt viele fantastische und extrem talentierte Entwickler, die diese Konzepte reaktiver und themenbasierter Animationen mithilfe von CSS-Variablen erstellen und damit experimentieren. Hier sind nur ein paar Stifte, in die Sie eintauchen und entdecken können, was unter der Haube passiert.
Von David Khourshid.
Dieses Beispiel zeigt die Leistungsfähigkeit von CSS-Variablenanimationen, die themenbezogen verwendet werden. Es wäre im Allgemeinen doppelt so viel Code, um diese Demo ohne CSS-Variablen auszuführen, und um ein Vielfaches, wenn Sie zwei Themen überschreiten möchten.
Von GRAY GHOST.
Hier ist ein weiteres Beispiel, bei dem Mausereignisse in JavaScript verwendet werden, die die Position eines Kreises bestimmen.
Jedes Mal, wenn Sie Ihre Maus bewegen, aktualisiert das JavaScript unsere deklarierten Variablen, sodass sich der Kreis relativ zum Cursor bewegen kann.
Von David Khourshid.
Hier ist das gleiche Prinzip, das oben gezeigt wurde, aber in einem anderen Zusammenhang verwendet wird.
Beachten Sie, was passiert, wenn Sie die Maus bewegen? Ziemlich cool, huh?
Von Wes Bos.
Wie wäre es, die Werte von Variablen auf andere Weise zu aktualisieren? Werfen wir einen Blick auf die folgende Demo von Wes Bos mit Schiebereglern, um die Positionen eines Bildes zu aktualisieren.
Bewegen Sie die Schieberegler nach Belieben. Beachten Sie die Coolness, die folgt? Einfach, aber einfach magisch. Alles, was zu tun ist, ist die Aktualisierung der Variablen für die Transformationsposition bei jeder Anpassung der Schieberegler. Suuuuhhhweeet!
Von Dan Wilson.
Wie wäre es mit etwas anderen für die Musiker da draußen? Seht euch dieses Hüft-Akkordeon von Dan Wilson an.
Whoa! Schau zu, wie sich diese Schlüssel bewegen! Das mag ein wenig einschüchternd wirken, aber im Kern aktualisiert JavaScript nur CSS-Variablen. Nicht mehr, nicht weniger.
Von Dan Wilson.
Verwenden Sie in dieser Demo die Eingabebereiche, um jede Transformationseigenschaft zu ändern, und zeigen Sie an, wie glatt sie sind, auch wenn Sie einen Übergang zwischen Eigenschaften ändern.
Da CSS-Variablen immer vererbbare Eigenschaften sind, können sie eine Neuberechnung der untergeordneten Elemente bewirken, was sich negativ auf die Leistung im Prozess auswirkt. Dies ist etwas, was Sie messen müssen, anstatt je nach Kontext zu raten.
Es scheint, dass das Ändern von CSS-Variablen für ein Element eine Neuberechnung des Stils für _all_ seiner untergeordneten Elemente auslöst. Autsch. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18. Mai 2017
Hier ist eine Demo von Shaw in der Gruppe Animation at Work Slack, die zum Testen verwendet wurde: CSS-Variablen Recalc Style Performance Test
Bei Tests (Chrome 58. Mac 10.12) wurde festgestellt, dass beim Setze CSS Var Die Schaltfläche wird so lange ausgelöst, bis der Browser den Hintergrund malt. Es gibt eine Wiederaufbereitungszeit von 52,84 ms und ein Rendering von 51,8 ms. Beim Umschalten auf den CSS-Eigenschaftstest wird ein völlig anderes Ergebnis festgestellt. Ab dem Zeitpunkt der Legen Sie die CSS-Eigenschaft fest Die Schaltfläche wird so lange ausgelöst, bis der Hintergrund malt. Es gibt ungefähr 0,43 ms für die Neuberechnung und 0,9 ms für das Rendern.
Wenn Sie wechseln Hintergrund Aus für Farbe Sie erhalten seitdem gleichwertige Messungen currentColor könnte bei den Kindern existieren oder auch nicht (rufen Sie David Khourshid aus). Jede Eigenschaft, die ist vererbbar führt immer zu einer Stiländerung für alle Kinder. Die Eigenschaft Hintergrundfarbe ist nicht vererbbar, daher der enorme Unterschied zu den CSS-Variablen immer vererbbar. Normalerweise CSS-Eigenschaften, die standardmäßig verwendet werden erben In den meisten Fällen führt dies zu einer großen Neuberechnung der Stile. Es ist immer noch wichtig zu wissen, dass das kontinuierliche Ändern von CSS-Variablen einen Leistungsabfall bedeuten kann. Um dies zu vermeiden, sollten Sie CSS-Variablen auf der spezifischsten (oder tiefsten) Ebene animieren, um eine Vielzahl betroffener Kinder zu verhindern. Weitere Informationen zum Reduzieren des Umfangs und der Komplexität von Stilberechnungen finden Sie auf der Web Fundamentals-Seite von Google.
Ich möchte Sie alle dazu ermutigen, diese Demo für sich selbst zu testen und zu testen und Ihre eigenen Schlussfolgerungen / Änderungen / benutzerdefinierten Tests zu machen und Ihre Ergebnisse in den Kommentaren zu teilen. Der Hauptvorteil dabei ist, dass CSS-Variablen eine enorme Flexibilität bieten, jedoch Auswirkungen auf die Festlegung von CSS-Variablen für Eltern mit einer großen Anzahl von Kindern haben.
Besonderer Dank geht an die Bande im Animations At Work Slack-Kanal für die laufenden Tests, Rückmeldungen und Diskussionen (David Khourshid, Joni Korpi, Dan Wilson und Shaw)..
