Hogyan használhatok css változókat az animációhoz?
Amikor megemlítjük a CSS-t a megbeszélések során, gyakran hibás nyelvről beszélünk. Deklaratív nyelv, logika és megértés nélkül; De ez nem egy valóság. Évek óta a fejlesztők vágyakoztak arra, hogy olyan szabványos CSS-változókat használjanak, amelyek olyan hosszú ideig voltak elérhetők az előfeldolgozókkal, mint például a LESS és a Sass. A fejlesztők számára nem csak a CSS változók valósak és kézzelfoghatóak, hanem animációs szkriptekben is használhatók. Még mindig szkeptikus vagy? Kövesd tovább, hogy többet megtudj!
A változók alapjai
A CSS változók azok a tárolt értékek, amelyeket újra használni kell a stíluslapon. Ezek elérhetők a felhasználó által definiált var () függvény használatával, és egyedi tulajdonság-jelöléssel vannak megadva.
A következő változók: root. globálisak, míg a választóban definiált változók erre a választóra jellemzőek.
A fenti példában minden div egy változót tartalmaz, de pontosan meghatározhatnánk a neveket a célzási módszerek, például az osztály vagy az id alapján.
A var () függvény szintén visszatérési értékeket vehet fel.
Ez hasznos lehet olyan helyzetekben, amikor a változó még nincs definiálva, vagy amikor egyéni elemekkel dolgozik, és az Árnyék DOM-ot.
A CSS változók nem készen állnak a főműsoridőre, de a jövő kilátásait sok vezető böngésző már végrehajtja a specifikációt. Ez csak idő kérdése, amíg aggodalom nélkül fel lehet őket használni, és ezúttal gyorsan közeleg.
Változók animációhoz
- Könnyen hibázható.
- A DOM nem túlzott manipulálása.
- Független DOM csomópontoktól.
- rendszerezést
- Az SVG-vel működik.
A CSS-ben végzett műveletek valóban kulcsfontosságú szerepet játszanak az egész kirakós animációval. CSS funkciók, például a calc. képes futni egy értéket, és végrehajtani az ilyen operátorokat, mint a szorzás, a megosztás, a kiegészítés, a kivonás, az értékek változása. Ez lehetővé teszi a CSS változók dinamikus létrehozását.
A fenti módszerek a tulajdonságértékek beállítására, lekérésére és törlésére szolgálnak. Használhatók a tipikus CSS tulajdonságainkban (háttérszín, betűméret stb.), De felhasználhatók a CSS változókhoz is. Ezek a paraméterek új értéket adnak egy globálisan definiált tulajdonságnak, más néven: rootként a CSS-ben.
Valódi felfedezést nyújtanak az animációhoz a CSS változók használatával is, mivel a JS-módszerünk dinamikusan meg tudja kapni, beállítani vagy törölni egy változót a futásidejű dinamikusan!
Új értéket is beállíthat egy adott elemhez. A fenti példapéldányban manipulálunk egy változót, amely a div-választóhoz van kötve. nem globális szinten.
demonstráció
Számos elképesztő és rendkívül tehetséges fejlesztő dolgozik, akik a reaktív és a tematikus animáció ezen koncepcióit használják és kísérletezik CSS változók használatával. Íme néhány példa arra, hogy merüljünk bele és megtudjuk, mi folyik a motorháztető alatt.
Napnyugta / napkelte
Ez a példa a CSS változók animációjának erejét mutatja a téma létrehozásához. Általában kétszer annyi kódot kell használni ahhoz, hogy a bemutatót CSS változók használata nélkül futtassa, és többször is, ha több mint két témát szeretne használni.
CSS változók animálása
Alex CSS Husky
Itt van ugyanaz az elv, mint fent bemutatták, de más összefüggésben.
Figyeljük meg, mi történik, ha mozgatjuk az egeret? Nagyon jó, mi?
Animáció CSS változókkal
És mi a helyzet a változók értékeinek más módon történő megváltoztatásával? Vessünk egy pillantást a következő Wes Bos bemutatóra, amely csúszkákat használ a képpozíciók frissítéséhez.
Csúsztassa a csúszkákat a szabadidejében. Figyelj a hűvösre, ami jön? Egyszerű, de egyszerűen varázslatos, és csak frissíti a konverziós pozíció változóit, amikor megváltoztatja a csúszkákat. Suuuuhhhweeet!
Single Div harmonika (animált CSS változókkal)
Mi a helyzet a zenészek számára? Nézd meg Dan Wilson hip-harmonikáját.
Változók CSS + Transform = Egyéni tulajdonságok (bemenetekkel)
Ebben a bemutatóban a beviteli tartományok használatával módosítsa az egyes konverziós tulajdonságokat, és győződjön meg arról, hogy ezek simaak, még akkor is, ha megváltoztatta a tulajdonság középső átmenetét.
A CSS változók mellékhatásai
Mivel a CSS változók mindig öröklődő tulajdonságok, a gyermekek számára új stílust készíthetnek, ami negatívan befolyásolja a teljesítményt ebben a folyamatban. Ezt a környezetétől függően kell mérni.
Huh, úgy tűnik, hogy a CSS változók egy elemen történő megváltoztatásával a stílust újra kell számolni a gyermekeinek _all_ számára. Hoppá. pic.twitter.com/jvpDT5UB2h
A tesztek során (Chrome 58. Mac 10.12) azt találták, hogy ha a Set CSS Var gombbal aktiválódik, amíg a böngésző nem tölti be a háttérfájlt, az újratöltéshez és az 51.8 ms rendezéshez 52,84 ms időtartamot vesz igénybe. A beállítások átállítása a CSS Property tesztben teljesen eltérő eredményt mutat. Attól a pillanattól kezdve, amikor rákattint a "Set CSS Property" gombra, amíg a háttér színtelen lesz, kb. 0,43 msec recalc és 0,9 ms-os renderelésen megy keresztül.