A CSS és JQuery animációk viharos tengere
Tudom, azt írtam hogy a Slick-ről fogok írni, de pár perce egy olyan áttörést szereztem a hibabejelentő felületemen, ami miatt képzeletben legalább kétszer hátraszaltóztam.
Volt egy olyan eset ugyanis, hogy.
A hibabejelentőmnek csináltam egy gyönyerőséges mobil verziót is, ahol egy hamburger ikon használatával a nav elemet szépen le lehet görgetni és válogatni lehet a menüpontok közt. Minden szép volt, a chrome devtools segítésével megnéztem hogy nézne ki mindenféle mobileszközön is, a legördülés animációja pedig gördülékeny volt, mint a karácsonyi töltött káposzta. Hurrá mondom, az egész projektet feltöltöttem a mobilomra és elindítottam, mert kíváncsi voltam hogy a mobil adta erőforrások mennyire elegendőek ehhez az egészhez, meg hogy nincs-e valami turpisság, ami nem jött elő esetleg devtoolsban.
Hát volt turpisság.
Az animáció szörnyen laggolt, plusz elég hülyén viselkedett a JQuery resize() evenet, ugyanis ha animáció alatt sült el, akkor nem minden szabály érvényesült, amit megadtam. (hogymi?)
Az ilyen problémák még elég frissek nekem, ugyanis a kód jó, az animáció elsül, minden feltétel jó, de laggol. Miért.
Értem én, hogy gyenge a mobil, de miért, más felületeken hasonló animációk szépen futnak.
Hát kiderült, hogy a tisztán JQuery animációk bizony laggolhatnak és másnak ebben nincs is semmi újdonság. Remek, gondoltam, akkor mit lehet ezzel mégis tenni?
A Velocity.js elvileg pont erre gyógyír, de miután sikerült integrálnom a rendszerbe, bizony semennyit sem javított semmin. (De legalább elpazaroltam rá pár órát)
Akkor mi lehet a következő lépés?
Hát… hiába macera, próbáljunk meg mindenféle animate()-et valahogy CSS transition-re cserélni, ugyanis minden tudomásom szerint a css animációk más erőforrásokat használnak, mint a JQuery animációk és bizony emiatt jobban is futnak.
Kis gondolkodás után létrehoztam css classokat, amiket JQuery-vel elvettem/hozzáadtam a divhez, amihez pedig szépen hozzáadtam egy css transitiont.
Bumm, “megjavult”! Azért csak “megjavult”, mert sokkal sokkal jobb lett, de egy hajszállal még mindig a tökéletes mögött van. Ettől függetlenül ez nekem bizony sikerélmény. Főleg azért, mert a resize() bug is elmúlt. Valamiért a css animációt megvárja a resize() elsülése, míg a JQuery animációkat nem várja meg. Érdekes.
Szóval röviden, JE
