animacja przejścia

Question

Witam, interesuje mnie animacja przejścia do podstrony (nie scrollowania do danego elementu na stronie głównej), żeby jakoś to wyglądało,a nie jak jest teraz, że strona się otwiera i wygląda to tak "płytko". Niestety na google'u nic nie znalazłem :/

Comments

żeby jakoś to wyglądało,a nie jak jest teraz, że strona się otwiera i wygląda to tak "płytko"

Wstaw proszę aktualny kod (albo podaj przynajmniej linka do strony, jeśli jest gdzieś publicznie dostępna), żeby można było sprawdzić jak to działa teraz.

Answer 1

Tego typu rozwiązania nie są trywialne. Trzeba:

1. Wykrywać kliknięcia w linki do tego samego originu (w uproszczeniu można przyjąć, że chodzi o tę samą domenę). Tutaj przyda się event delegation.
2. Pobierać żądaną stronę w tle, co wymusza prawdopodobnie równoczesne pokazanie jakiegoś subtelnego loadera. Można to też ograć inaczej, przy pomocy Service Workera. Wówczas, zgodnie ze wzorcem PRPL, można pobrać inne podstrony w tle, gdy użytkownik przegląda stronę. Wtedy będą po prostu gotowe. Można też robić szybki preload, gdy user zbliża myszkę do konkretnego linku.
3. Gdy mamy już pobraną stronę, trzeba wyciąć z niej treść i wstawić do jakiegoś ukrytego elementu na stronie.
4. I teraz animujemy element ze starą treścią i pokazujemy element z nową. Stary element usuwamy, bo nie jest już potrzebny.
5. Wypada jeszcze zmienić adres URL w przeglądarce, do czego posłuży nam History API.