Share
Atunci când menționăm CSS în discuții, vorbim adesea despre aceasta ca o limbă necugetată. Un limbaj declarativ, lipsit de logică și înțelegere; dar aceasta nu este adevărata realitate. De-a lungul anilor, dezvoltatorii au fost vrajitori variabile în CSS standard, fiind distrus de pre-procesoare, cum ar fi LESS și Sass pentru atâta timp. Nu numai că variabilele CSS sunt o opțiune reală și tangibilă pentru dezvoltatori, dar pot fi folosite și în scenarii de animație. Încă sceptic? Urmați-vă pentru a afla mai multe!
Variabilele CSS sunt valori stocate destinate reutilizării pe o foaie de stil. Acestea sunt accesibile folosind personalizarea var () funcția și setarea utilizând notația de proprietate personalizată.
: rădăcină --main-color: goldenrod; div fundal-culoare: var (- main-color);
Variabile definite în cadrul :rădăcină sunt globale, în timp ce variabilele definite într-un selector sunt specifice acelui selector.
div --module-color: goldenrod; culoarea de fundal: var (- modul-color);
În exemplul de mai sus orice div va accepta variabila, dar am putea deveni mai specifică cu denumirea folosind metode de direcționare, cum ar fi clasă și id de exemplu.
var () funcția poate accepta și valori de rezervă.
.nav fundal: var (- navbg, albastru);
Acest lucru poate fi util în situațiile în care o variabilă nu este definită încă sau când se lucrează cu elemente personalizate și DOM Shadow.
Variabilele CSS nu sunt destul de pregătite pentru prim-plan, dar perspectivele pentru viitor sunt foarte strălucitoare, cu multe browsere de frunte deja implementând spec. Este doar o chestiune de timp până când acestea pot fi folosite fără griji, iar timpul se apropie repede.
Există multe opțiuni pentru combinarea variabilelor CSS cu animația. Gândiți-vă la contexte, cum ar fi vizualizări audio, scenarii bazate pe eveniment JavaScript și chiar evenimente CSS, cum ar fi planare, concentra și ţintă. În teorie, un ceas Apple ar putea fi conectat la un API în timp ce folosește o animație bazată pe variabile CSS a unei inimi de bătăi. Apoi avem accelerometre, API-uri de tip tilt dispozitiv și chiar gamepad API-uri, dar de ce ar trebui să considerăm animarea cu variabilele CSS deloc? Iată câteva motive:
Operațiile în CSS sunt într-adevăr partea esențială a întregului puzzle cu animații. Funcții CSS, cum ar fi Calc poate accepta o valoare în timpul execuției și poate executa operatori, cum ar fi multiplicarea, divizarea, adăugarea, scăderea, mutarea valorilor într-una nouă. Acest lucru ajută la transformarea dinamică a variabilelor CSS.
Acum, când știm ce variabile CSS arată și ce pot face, este timpul să înțelegem cum se încadrează JavaScript în toate acestea.
Accentsconagua
document.documentElement.style.getPropertyValue ( '- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'roșu'); document.documentElement.style.removeProperty ( '- bgcolor');Metodele prezentate mai sus sunt utilizate pentru setarea, obținerea și eliminarea valorilor proprietăților. Ele pot fi folosite pentru proprietățile tipice ale CSS (culoare de fundal, marimea fontului etc), dar ele pot fi de asemenea folosite pentru variabilele CSS. Aceste opțiuni vor stabili o nouă valoare pentru proprietatea definită la nivel global, cunoscută și sub numele de :rădăcină în CSS.
Ele sunt, de asemenea, adevăratul secret al animației cu variabilele CSS deoarece metodele noastre JS pot obține, seta sau elimina o variabilă dinamic!
element var = document.querySelector ('div'); element.style.getPropertyValue ( '- bgcolor'); element.style.setProperty ('- bgcolor', 'roșu'); element.style.removeProperty ( '- bgcolor');De asemenea, puteți seta o nouă valoare pentru un anumit element, dacă doriți. În fragmentul de mai sus, manipulăm o variabilă care este atașată la o div selector versus să fie atașat la nivel global.
Exista o multime de dezvoltatori minunati si extrem de talentati care construiesc si experimenteaza aceste concepte de animatii reactive si tematice folosind variabile CSS. Aici sunt doar câteva pixuri pentru a se arunca cu capul în jos și pentru a descoperi ce se întâmplă sub capota.
De David Khourshid.
Acest exemplu arată puterea animațiilor variabile CSS utilizate într-o manieră tematică. În general, codul va fi de două ori mai mare pentru a executa această demonstrație fără variabile CSS și de multe ori mai mult dacă doriți să depășiți două teme.
De GREY GHOST.
Iată un alt exemplu care utilizează evenimentele mouse-ului în JavaScript care conduc locația unui cerc.
De fiecare dată când mutați mouse-ul, JavaScript actualizează variabilele noastre declarate, permițând cercului să se miște în funcție de cursor.
De David Khourshid.
Iată același principiu demonstrat mai sus, dar utilizat în alt context.
Observați ce se întâmplă atunci când mutați mouse-ul în jur? Destul de cool?
De Wes Bos.
Ce zici de actualizarea valorilor variabilelor în alte moduri? Să aruncăm o privire la următorul demo de Wes Bos folosind glisoare pentru a actualiza pozițiile unei imagini.
Îndepărtați glisierele în timpul liber. Observați răcoarea care urmează? Simplu, dar pur și simplu magic și tot ceea ce face este actualizarea variabilelor pentru poziția de transformare de fiecare dată când glisoarele sunt ajustate. Suuuuhhhweeet!
De Dan Wilson.
Ce zici de ceva diferit pentru muzicieni acolo? Check out acest acordeon de șold de Dan Wilson.
Uau! Uita-te la aceste chei muta! Acest lucru ar putea părea un pic intimidant pentru a trece prin, dar la bază este doar JavaScript actualizarea variabilelor CSS. Nimic mai mult, nimic mai puțin.
De Dan Wilson.
În această demonstrație, utilizați intervalele de intrare pentru a modifica fiecare proprietate transformă și a vedea cât de netede sunt chiar dacă schimbați o proprietate mijlocie de tranziție.
Deoarece variabilele CSS sunt întotdeauna proprietăți moștenite, ele pot provoca o recalculare a stilului copiilor, afectând în mod negativ performanța în proces. Acesta va fi ceva ce trebuie măsurat, spre deosebire de ghicitul în funcție de contextul dvs..
Se pare că modificarea variabilelor CSS pe un element declanșează o recalculare a stilului pentru toți copiii săi. Ouch. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18 mai 2017
Iată un demo Shaw postat pe grupul Animație la muncă Slack folosit pentru testare: CSS Variables Recalc Style Performance Test
În timpul testelor (Chrome 58. Mac 10.12) sa descoperit că atunci când Setați CSS Var butonul este declanșat până când browserul dă culoarea fondului, există 52,84ms timp de recalc și redare de 51,8ms. Comutarea uneltelor la testul proprietății CSS este descoperit un rezultat foarte diferit. Din momentul în care Setați proprietatea CSS butonul este declanșat până când culorile de fundal au aproximativ 0,43ms de recalc și redare de 0,9ms.
Dacă comutați fundal afara pentru culoare veți obține măsurători echivalente de atunci currentColor ar putea sau nu să existe la copii (strigă la David Khourshid). Orice proprietate este transmisibil va produce întotdeauna un stil de recalc pentru toți și toți copiii. Proprietatea culoare de fundal nu este moștenit, prin urmare, diferența extraordinară cu variabilele CSS care sunt mereu transmisibil. De obicei, proprietățile CSS care implică moşteni va produce în majoritatea cazurilor un recalc mare de stiluri. Este totuși important să rețineți că schimbarea variabilelor CSS continuu poate fi o scurgere a performanței. O bună practică pentru a evita acest lucru este animarea variabilelor CSS la cel mai specific nivel (sau cel mai adânc nivel), pentru a preveni o multitudine de copii afectați. Puteți citi mai multe despre reducerea sferei și a complexității calculelor stilului prin intermediul paginii Google Fundamente Web.
Vă încurajez pe toți să vă scufundați și să vă testați demo-ul pentru dvs. și să faceți propriile teste / schimbări / teste personalizate și să vă împărtășiți rezultatele în comentarii. Principala problemă în acest sens este că variabilele CSS oferă o flexibilitate imensă, dar vor exista implicații de performanță pentru setarea variabilelor CSS pe un părinte cu o sumă mare de copii.
Mulțumiri speciale bandei din programul Animații la locul de muncă "Slack" pentru testele, feedback-ul și discuțiile (David Khourshid, Joni Korpi, Dan Wilson și Shaw).
