CSS technikák az anyag fodrozódáshoz

Útmutató a csengőhatás különféle módszereire a CSS és a JavaScript használatával

Nemrég be kellett valósítanom a fodrozódást az anyagtervezésből egy webes alkalmazásba. És akkor rájöttem, hogy fogalmam sincs, hogy ezt hogyan valósítják meg. Ez vezetett egy útra a meglévő megvalósítások tanulmányozására, sőt egy teljesen új technika kidolgozására, amely hasznos lehet az Ön számára.

Mi ez a fodrozódó hatás?

Várj, nem ismered a Google anyagtervezéséből származó fodrozódó hatást? Hány éve élsz egy barlangban?

A fodrozódó hatást egy gomb megnyomására használják. Ugyanúgy működik az egérrel vagy az érintéssel történő interakcióknál.

A pozíciót, amelyre kattint vagy megérinti a gombot, kapcsolattartó pontnak nevezzük. Onnan egy gyűrűt továbbítanak, elveszítik az átlátszatlanságot, amint egyre nagyobb lesz, amíg meg nem tölti az egész gombot. Akkor teljesen eltűnik.

Ennek a fodrozódásnak a dinamikája hasonló a hullámokhoz, amelyeket akkor kap, amikor megérinti a folyékony felületet, vagy amikor egy sziklát ejt egy tóba.

A hullámok, amelyeket az interneten talál

Kutatásom után két fő technikát találtam, amelyeket a ripple effektus megvalósítására használnak a webes alkalmazásokban.

Használja :: álszerelem után

Ennek a technikának a felhasználásával a gomb :: pszeudo-elemét félig átlátszó körként formálják, és animációval növelik és elhalványulnak. A tárológombnak túlcsordulásnak kell lennie: elrejtve, hogy a kör soha ne folyjon el a gomb felületén kívül, és a helyzet: a kört a gombon belüli elhelyezése megkönnyíti. A technikával kapcsolatos további részleteket Ionuț Colceriu e cikkben olvashatja.

Az egyik nagy dolog ebben a technikában az, hogy ez egy tiszta CSS megoldás a fodrozódó hatáshoz. A fodrozódó hatás azonban mindig a gomb közepétől indul, nem az érintkezési ponttól. Ez nem a legtermészetesebb visszajelzés.

Javítható úgy, hogy a JavaScript használatával tárolja az érintkezési pontot, és felhasználja azt a fodrozódás pozicionálására. Pontosan ezt tette a material.io a web fodrozódó komponensükért. CSS változókat használ az érintkezési pontok tárolására, és a :: után álnélelem ezeket a változókat használja a pozicionáláshoz.

Gyerek elemek használata

Lényegében ez a technika ugyanazt a stratégiát használja, mint korábban. Ám egy álszerelő elem helyett a gomb belsejébe egy átmeneti elemet ad, amelyet a JavaScripten keresztül lehet elhelyezni. Ezt a technikát Jhey Tompkins ebben a cikkben írja le.

A legegyszerűbb megvalósítás a gomb minden kattintására kiterjed egy tartományt, és az egér pozícióját használja a kattintási eseményen a span pozíciójának megváltoztatásához. A CSS-animáció növeli és elhalványítja a span-t, amíg teljesen átlátszóvá nem válik. Dönthetünk úgy, hogy eltávolítjuk a DOM-ból a span-ot, mihelyt az animáció befejeződik, vagy csak hagyhatjuk ott a szőnyeg alatt - senki sem fog észrevenni az átlátszó span-t.

Megtaláltam ennek egy másik változatát, amelyen a gyerek elem egy span helyett svg, a span pedig a JavaScript segítségével animálódott. Ezt a variációt Dennis Gaebel magyarázza, de lényegében ugyanaz, és valószínűleg lehetővé teszi az összetett SVG formák és effektusok használatát.

Probléma a beküldött bemenetekkel

Mindkét fent leírt technika nagyszerűnek tűnik. De ez történik, amikor megpróbáltam alkalmazni azokat a bemeneti elemekre, amelyek típusa = benyújtás:

Miért nem működnek?

A bemeneti elem helyettesített elem. Röviden, ez azt jelenti, hogy ezekkel az elemekkel nagyon keveset lehet megtenni, a DOM és a CSS vonatkozásában. Pontosabban, nem lehetnek gyermekelemek, és nem is álelemek. Most már világos, hogy ezek a technikák miért kudarcot vallnak.

Tehát, ha Anyagtervezőt használ, akkor jobb, ha tartózkodik a beviteltől [type = Submit], és ragaszkodik a gomb elemekhez. Vagy csak olvass tovább.

Hullámok hozzáadása a bemenetek benyújtásához

Azon a webalkalmazáson, amelyen dolgoztam, már sok beküldési gomb volt. Ha mindegyik megváltoztatása különféle elemré válik, sok munka szükséges, és nagy a kockázata a stíluslapok és a JavaScript logika megtörésének. Tehát ki kellett kitalálnom, hogyan lehet hozzáadni hullámokat a meglévő küldési gombokhoz.

Csomagoló tartály használata

Gyorsan rájöttem, hogy becsomagolhatom a beküldés gombot egy inline-block elem belsejébe, és az inline-block elemet felhasználhatom a fodrozódás felületének. Itt egy gyors bemutató:

Bár kedvelem ezt a megoldást az egyszerűség kedvéért, mégis túl sok helyen kellett változtatnom a jelölést. És tudtam, hogy törékeny megoldás lesz - új fejlesztők lépnek be a projektbe, és elkészítik a benyújtási gombokat anélkül, hogy megfelelően összecsomagolnák őket egy fodrozódó felületre. Tehát más olyan megoldásokat kerestem, amelyek nem igényelték a DOM megváltoztatását.

Radiális gradiensek

A radiális gradiens szintaxisa lehetővé teszi mind a gradiens középpontjának, mind a méretének ellenőrzését. Természetesen lehetővé teszi számomra a színátmenet színének szabályozását is, beleértve a félig átlátszó színeket is. És soha nem tölti túl az elemet, amelyre alkalmazzák. Tehát úgy tűnik, hogy mindent megtesz, amire szükségem van!

Nem olyan gyorsan ... hiányzik egy dolog: a háttérkép tulajdonsága nem animálható. Nem tudtam a gradienst CSS-animációk segítségével növekedni és átlátszóvá válni. Sikerült rávenni, hogy a háttér méretű tulajdonság animálásával növekedjen, de ennyit tettem.

Kipróbáltam még néhány dolgot, például egy elhalványuló kört, mint animált képet (az apng formátumot használva), és háttérképként alkalmaztam. De akkor nem tudtam ellenőrizni, hogy mikor kezdődött és ért véget a kép hurok.

Végül egy megoldás a JavaScript használatával

Amit nem tud csinálni a CSS-ben, megteheti JavaScript-ben. Miután több időt töltöttem, mint amennyit hajlandó beismerni, hogy ezt a hatást CSS-animációkkal működtettem, csak feladtam, és úgy döntöttem, hogy az animációt JavaScript-re írom.

A fenti radiális gradiens megoldással kezdtem, és az window.requestAnimationFrame felhasználásával folyékony animációt készítettem a sugárirányú gradienstől, növekvő és elhalványuló képességgel. Íme a végső megoldás:

Következtetés

Tehát lehetséges a ripple effektusok a küldés gombokra, csak nem csak a CSS használatával.

Nem találtam ezt a technikát az interneten sehol dokumentálva, ezért a sajátomnak nevezem. A Leonardo hullámosítási technikája nem igényli a DOM megváltoztatását, és minden elemnél működik, mert nem támaszkodik ál- vagy gyermekelemekre. Ez azonban nem hibátlan megoldás.

Először is, ott van teljesítmény. A gradiens JavaScript-rel történő animálásával sok böngészőoptimalizálást veszíthet. Mivel azonban az egyetlen megváltoztatandó tulajdonság a háttérkép, azt gyanítanám, hogy a böngészőknek nem kell újból feláramolniuk, és csak a stílusok újbóli alkalmazását és az elem újrafestését kell tennie. A gyakorlatban pontosan ez történik, és a teljesítmény nagyon jó. Kivétel ez alól a Firefox Mobile, amely valamilyen oknál fogva nem lép fel az animációval. (szerkesztés: az animáció zökkenőmentes a modern Firefox Mobile verziókban)

Másodszor, a technika a gomb háttérképet használja. Ha a formatervezés megköveteli, hogy a gombjainak egy képet kell használniuk a háttérhez, akkor a hullámos hatás felülbírálja ezt. Ha valóban szüksége van erre a képre a rajzolatán, akkor a JavaScriptet módosíthatja, hogy rajta húzza a sugárirányú gradienst a meglévő háttérkép tetejére.

Harmadszor, úgy tűnik, hogy ez nem működik az Internet Explorerben. Nem látom azonban okát, hogy miért ne működne ez az IE10 vagy újabb verzióval. Lehet, hogy azért van, mert az IE eltérő szintaxist használ a radiális gradienshez. De ki érdekli manapság az IE? (szerkesztés: ez a módszer probléma nélkül működik az Internet Explorer 11-en)