A CSS és JQuery animációk viharos tengere

TMSBK
TMSBK
Jul 10, 2017 · 2 min read

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

    TMSBK

    Written by

    TMSBK