Nawigacja dla wersji mobilnej

[CoderX]

Yoo, mam pewno pytanie co do tytulu. Powiedzmy ze mam strone strone i jest ona responsywna albo rozpoznaje urzadzenie czy to desktop czy OS telefonu i odpala inne pliki pod wersje mobilna (co osobiscie bardziej preferuje) no i powiedzmy ze chce dodac do tego nawigacje ktora rozsowa sie od lewej strony. No i.. heh, tutaj niby nie problem bo spoko moge zrobic cos takiego bez problemu ale jest pewien problem w tym i pewna rzecz ktorej nie umiem. Problem - mam wrazenie ze taka animacja nie jest zbyt plynna i sie jakby "tnie" albo miala malo FPS, taka nawigacja jest zrobiona w css i jquery. To teraz rzecz ktorej nie umiem, chce zrobic nawigacje jaka ma np, gmail albo twitch na androdzie (appki) ze nawigacja rozsuwa sie sledzac powoli palec az w pewnym momencie zostaje otwarta na stale, tak samo z zamknieciem nawigacji, no i oczywiscie tam juz sie tak ta animacja nie "tnie" a np, na mojej stronie juz mam wrazenie ze podobna animacja gorzej dziala mimo ze telefon to galaxy s6 wiec napewno nie moze to byc dla niego za duze "obciazenie". Jest to glownoe temat bardziej teoretyczny niz praktyczny wiec nie oczekuje tu kodu a bardziej zrodla takiego czegos albo przyklady jak takie cos zrobic. Ale oczywiscie od razu kodem nie pogardze . Prosze o pomoc/pokierowanie mnie jak osiagnac cos takiego, i prosze nie pisac odpowiedzi typu "jquery, css i html i dasz rade zrobic"..

[Szymon.]

Chodzi ci o to, że nav na gmailu płynnie rozsuwa wie na cały ekran? Dajesz po prostu wartosc width na 100wv i żeby było płynnie, uzyj funkcji animate

[CoderX]

Chodzi ci o to, że nav na gmailu płynnie rozsuwa wie na cały ekran? Dajesz po prostu wartosc width na 100wv i żeby było płynnie, uzyj funkcji animate

 

No ta funkcja jakby nie patrzeć to bez niej się nie obejdzie (chyba, myślę że można też zrobić w CSS) i zawsze jej używam do jakiś pseudo/małych animacji.

 

Tutaj zarzucam filmik jak to wygląda na telefonie (Galaxy S6):

 

https://3.sendvid.com/9lbj5ixx.mp4

 

Linki w nawigacji to tylko przykład iż testuje i mam ten problem właśnie. Jak widać w trakcie rozsuwania nawigacja, to ona nie jest taka płynna jak np, rozsuwanie prawie takiej samej nawigacji co w appce Gmail albo twitch gdzie widzę te "60 FPS". I w tym właśnie jest problem, co mogę zrobić aby tak nie było? Okropnie to trochę wygląda i nie "profesjonalnie". Na komputerze wygląda to jak najbardziej "płynnie". Za chwilę wrzucę kod na codepin czy jakoś tak to będzie można zobaczyć jak kod wygląda wraz z example. A kolejna sprawa to w aplikacji Gmail albo Twitch można zrobić że w trakcie już przesuwania palcem od boku ekranu w prawo to nawigacja powoli się rozsuwa z palcem w tym samym czasie. Funkcja Swipe z JQuery odpada iż ona powoduje że kolejna funkcja jest wywołana dopiero po tym jak skończy się przesuwać palcem po ekranie przez dana odległość (np, 100px). Jesli ktoś mnie nakieruje było by super

 

 

//EDIT

 

dobra, udało mi się wszystko wstawićna codepen i tam również działa płynnie jak na PC ale na telefonie ta animacja się "tnie" jak widać na telefonie. 

 

[CoderX]

Problem rozwiązany. W końcu udało mi się znaleźć to czego szukałem/odpowiedzi w google na stackoverflow. W css do elementu na którym będzie przeprowadzana animacja należy dodać taki atrybut:

 

-webkit-transform: translateZ(0);

 

Powoduje on że zmuszane jest do pracy GPU nad tym elementem co w efekcie powoduje lepsze działanie i oczywiście już się nie tnie/laguje animacja.

 

Temat do zamknięcia. Przepraszam za spam, może kiedyś komuś się przyda

[Szymon.]

Tak na marginesie, to -webkit- jest vendor-prefixem, a właściwa nazwa atrybutu to transform. Vendor-prefixy dodajemy, żeby dana reguła działała na wszystkich przeglądarkach. Poczytaj sobie:

https://developer.mozilla.org/pl/docs/Glossary/Vendor_Prefix