Cum se utilizează variabilele css pentru animație

Atunci când menționăm CSS în discuții, vorbim adesea despre aceasta ca o limbă defectuoasă. Limba declarativă, lipsită de logică și înțelegere; Dar aceasta nu este o realitate adevărată. De-a lungul anilor, dezvoltatorii au dorit să utilizeze variabilele standard CSS care au fost disponibile atât timp cu preprocesoarele, cum ar fi LESS și Sass. Nu numai că variabilele CSS sunt real și tangibile pentru dezvoltatori, dar pot fi folosite și în scenarii de animație. Sunteți încă sceptici? Urmați pentru a afla mai multe!

Bazele variabilelor

Variabilele CSS sunt valori stocate care sunt destinate reutilizării în foaia de stil. Acestea sunt disponibile utilizând funcția var () definită de utilizator și sunt specificate utilizând notația de proprietate personalizată.

Variabilele definite în: root. sunt globale, în timp ce variabilele definite în selector sunt specifice acestui selector.

În exemplul de mai sus, orice div are o variabilă, însă putem defini mai exact numele folosind metode de direcționare, cum ar fi clasa sau, de exemplu, id-ul.

Funcția var () poate lua de asemenea valori returnate.

Acest lucru poate fi util în situațiile în care variabila nu este definită încă sau când se lucrează cu elemente personalizate și DOM Shadow.

Variabilele CSS nu sunt destul de pregătite pentru timp, dar perspectivele pentru viitor, multe browsere de frunte deja implementează caietul de sarcini. Este doar o chestiune de timp până când acestea pot fi folosite fără griji, iar acest timp se apropie repede.

Variabile pentru animație

E ușor de depanat.
Nicio manipulare excesivă a DOM.
Independent de nodurile DOM.
theming
Lucrează cu SVG.

Operațiile în CSS sunt într-adevăr o parte esențială a întregului puzzle cu animație. Funcțiile CSS, cum ar fi calc. poate lua o valoare în timpul execuției și poate executa operatori ca multiplicare, divizare, adăugare, scădere, schimbare de valori. Acest lucru vă permite să faceți dinamică variabilele CSS.

Metodele afișate mai sus sunt utilizate pentru setarea, preluarea și ștergerea valorilor proprietăților. Ele pot fi folosite pentru proprietățile CSS tipice (culoarea de fundal, dimensiunea fontului etc.), dar pot fi folosite și pentru variabilele CSS. Acești parametri vor stabili o nouă valoare pentru o proprietate definită la nivel global, cunoscută și ca: root în CSS.

Ele sunt, de asemenea, o adevărată descoperire pentru animație folosind variabilele CSS, deoarece metodele noastre JS pot obține, seta sau șterge o variabilă în timpul execuției dinamic!

De asemenea, puteți seta o nouă valoare pentru un anumit element. În fragmentul de exemplu de mai sus, manipulăm o variabilă care este legată de selectorul div. nu la nivel global.

demonstrație

Există mulți dezvoltatori uimitori și extrem de talentați care folosesc și experimentează aceste concepte de animație reactivă și tematică folosind variabile CSS. Iată doar câteva exemple pentru a se arunca cu capul în jos și pentru a afla ce se petrece sub capota.

Apus / soare

Acest exemplu arată puterea de animație a variabilelor CSS folosite pentru a crea o temă. În general, veți avea nevoie de cod de două ori mai mult pentru a rula această demonstrație fără a utiliza variabilele CSS și de multe ori mai mult dacă doriți să utilizați mai mult de două teme.

Animarea variabilelor CSS

Alex CSS Husky

Aici este același principiu care a fost demonstrat mai sus, dar folosit într-un context diferit.

Observați ce se întâmplă atunci când mutați mouse-ul? Destul de cool, nu?

Animație cu variabile CSS

Și cum se schimbă valorile variabilelor în alte moduri? Să aruncăm o privire la următorul demo Wes Bos, care folosește cursorul pentru a actualiza pozițiile imaginii.

Glisați glisierele în timpul liber. Fiți atenți la răcoarea care vine? Simplu, dar pur și simplu magic și doar actualizează variabilele pentru poziția de conversie ori de câte ori schimbați glisoarele. Suuuuhhhweeet!

Single Accordion Div (animat cu variabile CSS)

Ce zici de ceva diferit pentru muzicieni? Uită-te la acest acordeon de șold al lui Dan Wilson.

Variabile CSS + Transform = Proprietăți individuale (cu intrări)

În această demonstrație, utilizați intervale de intrare pentru a schimba fiecare proprietate de conversie și asigurați-vă că sunt netede, chiar dacă ați schimbat tranziția mijlocie a proprietății.

Efectele secundare ale variabilelor CSS

Deoarece variabilele CSS sunt întotdeauna proprietăți moștenite, ele pot provoca o recalculare a stilului pentru copii, afectând negativ performanța în acest proces. Acest lucru va trebui să măsurați în funcție de contextul dvs.

Se pare că schimbarea variabilelor CSS pe un element determină ca stilul să fie recalculat pentru toți copiii lui. Hopa. pic.twitter.com/jvpDT5UB2h

În timpul încercărilor (Chrome 58. Mac 10.12), sa constatat că, atunci când butonul Set CSS Var funcționează atâta timp cât browser-ul nu vopsea peste fundal, vor fi cheltuite recalc 52.84 ms timp și redare 51.8ms. Comutarea opțiuni în testul CSS Proprietatea arată un rezultat foarte diferit. Din momentul în care faceți clic pe „Set CSS-proprietate“, atâta timp cât fundal nu este colorat, este nevoie de aproximativ 0,43 ms și 0,9 ms de redare recalc.

Articole similare

Pagina anterioară

Pagina următoare