logo
22.11.2019 09:38
1
Hezký den,

na webu https://www.madlove.cz/molecool/ mám problém, že po pár vteřinách, kdy sjede točící se pilulka, tak místo toho, aby se jen lehce hýbala na místě, tak sjede úplně zhora ještě 5x než se konečně dostane ke správnému pohybu.

Chrome i mozilla to poberou bez problémů, nevíte, kde by mohla být chyba nebo jakým způsob to opravit i pro safari?

Kód, který je asi problémový (trochu hrubě napsaný, zkoušel jsem různé úpravy :) ):
Kód:
setTimeout(function () {
        $(".pill").css('top', '49%');

        setInterval(function () {
            $(".pill").css('top', '49%');
            setTimeout(function () { $(".pill").css('top', '52%'); }, 3000);
        }, 6000);

        setTimeout(function () { $(".pill").css('top', '52%'); }, 3000);

        setInterval(function () {
            if (!$(".pill img:nth-child(1)").hasClass("last")) {
                $(".pill img:nth-child(1)").appendTo(".pill");
            }
        }, 50);


    }, 5500);
ten poslední interval s 50ms je pro první animaci točení pilulky.

Díky,
Michal
22.11.2019 09:41
2
Jaký kód dělá ten pohyb?
22.11.2019 09:45
3
Původně odeslal tuk
Jaký kód dělá ten pohyb?
Přidal jsem do textu
22.11.2019 09:54
4
Mohl by to způsobovat ten selektor nth-child. Safari s ním má něco za problém.

Can I use... Support tables for HTML5, CSS3, etc
22.11.2019 09:57
5
Původně odeslal tuk
Mohl by to způsobovat ten selektor nth-child. Safari s ním má něco za problém.

Can I use... Support tables for HTML5, CSS3, etc
Zkusil jsem to přepsat na first-child, ale nemám safari :) Můžeš prosím zkusit, jestli to funguje, jestli na to koukáš v safari?
22.11.2019 10:02
6
Na browserstack.com se lze podívat přes několik prohlížečů.
22.11.2019 10:04
7
Původně odeslal tuk
Na browserstack.com se lze podívat přes několik prohlížečů.
To jsem zkoušel, ale tam mi funkce kupodivu fungovala bez problémů.
22.11.2019 10:04
8
Problém je ten, že se opakuje transition na elementu .pill. S obrázky v tomto elementu vloženýma to nemá nic společného. Zkusím se na to podívat až budu mít chvíli, jestli nikdo od té doby nepřijde s řešením.
22.11.2019 10:08
9
Původně odeslal Toliceek
Problém je ten, že se opakuje transition na elementu .pill. S obrázky v tomto elementu vloženýma to nemá nic společného. Zkusím se na to podívat až budu mít chvíli, jestli nikdo od té doby nepřijde s řešením.
Díky, není možné, že je to tím, že je prvek na začátku mimo okno?
22.11.2019 10:10
10
Všiml jsem si toho že to dělá jen když je transition: top 3s ease-out nastavena na stejně nebo více sekund než je změna té top hodnoty v jQuery (tedy také 3 sekundy). Zkus nastavit

Kód:
transition: top 2.9s ease-out, opacity 0.6s ease-in-out
Když jsem to zkoušel změnit on fly tak to pomohlo. Je možné že tam dělá bordel to, že do té stejné hodnoty ze které se se dělá transition mezi tím zasahuje JS.
22.11.2019 10:16
11
Neřeknu ti konkrétně co je tady za problém a snad do toho nevznesu nějaké zmatky, ale setkal jsem se s tím, že kombinace transition a animací přes jquery dělala podobné problémy, možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.

Vygooglit se toho dá spousta, např. https://stackoverflow.com/questions/...ss-transitions
22.11.2019 10:20
12
Původně odeslal Toliceek
Všiml jsem si toho že to dělá jen když je transition: top 3s ease-out nastavena na stejně nebo více sekund než je změna té top hodnoty v jQuery (tedy také 3 sekundy). Zkus nastavit

Kód:
transition: top 2.9s ease-out, opacity 0.6s ease-in-out
Když jsem to zkoušel změnit on fly tak to pomohlo. Je možné že tam dělá bordel to, že do té stejné hodnoty ze které se se dělá transition mezi tím zasahuje JS.
Skvěle, asi to opravdu narušovalo, s tím 2.9s to funguje :) Díky moc

---------- Příspěvek doplněn 22.11.2019 v 10:20 ----------

Původně odeslal Petr Široký
Neřeknu ti konkrétně co je tady za problém a snad do toho nevznesu nějaké zmatky, ale setkal jsem se s tím, že kombinace transition a animací přes jquery dělala podobné problémy, možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.

Vygooglit se toho dá spousta, např. https://stackoverflow.com/questions/...ss-transitions
Už to funguje, ale souhlasím, že by byla rozumnější cesta jít bez kombinací
22.11.2019 10:31
13
Původně odeslal Petr Široký
... možná bych doporučil se zkusit zbavit transition úplně a dělat animaci jen přes jquery.
Já bych to možná ještě otočil a udělal následnou nekonečnou animaci přes css. Přes @keyframes je to dokonce ještě jednodužší než přes jQuery, pomocí jQ by se pouze po úvodním efektu přidala classa která by danou animaci aktivovala. Animace přes CSS jsou podstatně méně náročné na výkon než ty stejné přes JS. V tomhle případě je to asi skoro jedno, ale při složitějších animacích tam může být opravdu podstatný rozdíl.
22.11.2019 11:25
14
Původně odeslal Toliceek
Animace přes CSS jsou podstatně méně náročné na výkon než ty stejné přes JS.
Souhlas. Z principu se také snažím prakticky vše dělat jen přes css, dokud to jde. Moje poznámka byla mířena čistě na transition kvůli těm komplikacím, jinak by keyframes a jquery měly fungovat, protože tam to funguje na jiném principu - osobně jsem se setkal s problémy jen u transition s jquery.
22.11.2019 17:37
15
Btw jen k safari. Mám tam často problémy a hromadu z nich řeší will-change. Tak třeba to někomu pomůže.