Nuxt.js: Przejścia między podstronami

0:00W poprzedniej lekcji stworzyliśmy nasze pierwsze linki i dzięki nim jesteśmy w

0:05stanie nawigować się po naszej stronie w taki sposób, że jest on zgodny z duchem.

0:11I teraz ten duch Progressive Enhancement pociągniemy dalej na zasadzie takiej, że

0:16stworzymy animacje przejść między naszymi stronami wewnątrz tego samego layoutu.

0:21Czy jeśli wejdziemy na dokumentację jak ta.

0:24Tutaj jest sekcja Transition.

0:26I generalnie jest taka zasada, że

0:29mamy domyślnie ustawione transition na karcie i nie musimy tego deklarować,

0:34jeżeli chcemy zrobić jakąś customowe tradycje.

0:37Bo może być taka potrzeba, no to wtedy możemy wykorzystać sobie tutaj

0:41transition name w naszych komponentach i tak to definiować.

0:45Ale możemy też po prostu wykorzystać gotowe style w tym momencie, które są

0:49gotowe i po prostu zmodyfikować ich wartości.

0:51Czyli przejdziemy do naszego layoutu default.

0:55Tutaj do lekcji 22.

1:05Tutaj wychodzimy z założenia, że tylko ten layout będzie miał takie tranzyty.

1:09Jeśli chcielibyśmy, aby każdy z naszych layoutów miał taką samą tradycję, wtedy

1:14możemy użyć właśnie tego pola globalnego na CSS zdefiniowanego w configu.

1:20Jest. Tutaj mamy sekcję CSS i możemy ją sobie

1:23tutaj umieścić wewnątrz naszych assets powiedzmy.

1:27Global Access.

1:30I tutaj wklejam te style.

1:32Powiedzmy, że będziemy chcieli mieć wsparcie dla różnych.

1:36Layoutów dalej trzymając się tej samej pozycji.

1:39Więc wpisujemy assets i global kropka CSS.

1:43Co się nam powinno tutaj załadować?

1:46I to oczywiście zapiszemy.

1:48I generalnie zasada jest taka, że.

1:52Na nazwie danego patcha, który domyślnie jest ustawiony na home.

1:55Mamy FX Interactive i Live Active,

1:58więc jeśli chcielibyśmy aby dana strona miała translację, no to musimy.

2:03Ustawić tutaj transition na właściwości

2:07których chcielibyśmy, aby zostały animowane.

2:09My to tak sobie wstawimy, ale dlaczego nie?

2:12Nie jest to może najwydajniejsze, ale na nasze potrzeby wystarczy jak najbardziej.

2:18I ustawimy sobie transakcję liniową albo i nie.

2:22A jeśli chodzi o CSS a to zapraszam do innych moich kursów z tym związane.

2:26Tam skupiamy się na dobrych praktykach związanych z procesem.

2:30No i według tej tranzycji generalnie to co się powinno dziać, jeżeli to zapiszemy,

2:35będziemy mieli taki pół sekundowy animacje przejścia z przeźroczystości na nie,

2:41przeźroczystość i zobaczmy czy to faktycznie działa.

2:46Czyli na Robin.

2:48Register i to jest chyba domyślna

2:49animacja, więc jeśli sobie ją zmienimy powiedzmy na.

2:54Powiedzmy transport.

2:57I dajemy tutaj 7 sekund.

3:01Transform ustawimy na skalę 0.

3:08Zapiszemy.

3:11Zobaczymy co się wydarzy.

3:13Nie widać tutaj efektu, prawdopodobnie

3:15dlatego, że nie ma tutaj tej wartości domyślnej.

3:19Transform scale 1.

3:22Zobaczmy czy to coś zmieni.

3:26Niestety nie zadziałało.

3:28Zobaczmy o co tutaj może chodzić.

3:32Całkiem możliwe, że powinniśmy mieć domyślną.

3:38Nazwę naszego page'a tutaj.

3:40No właśnie wydaje mi się, że to jest problemem, że niekoniecznie jest to home,

3:43tylko page interactive, bo my nawiguje pomiędzy konkretnymi flagami.

3:49Zobaczmy Register I faktycznie teraz to działa.

3:52Nie jest to najfajniejsza animacja.

3:54Szczerze mówiąc, nie wiem, czy chciałbym,

3:55aby strony, które odwiedzam robiły tego typu przejścia.

4:00Moglibyśmy może spróbować zrobić jakiegoś

4:03translate w prawą stronę, tak jak widzimy tutaj.

4:06Nawet w momencie kiedy to znika, to nowy

4:08page już nam się pojawia, więc może zostańmy tutaj przy

4:12domyślnym opcji, ale jesteśmy w stanie robić naprawdę różne rzeczy, czyli np.

4:17background ustawić na czerwony, albo żeby

4:19nasza strona była domyślnie czerwona czy biała.

4:23I w momencie gdy zmienia się tło naszego

4:27page'a to możemy zmienić background powiedzmy na czarne.

4:30Czy ja będzie się tak wyrażać?

4:31Jestem bardzo ciekawy jak to będzie

4:33wyglądało i w związku z tym zobaczmy co to się stanie.

4:40Login Register. Na razie nic.

4:43Musimy ustawić jawnie ten przekręt.

4:46Na jakiś kolor.

4:48Więc tutaj możemy ustawić sobie po prostu na klasie content.

4:51Domyślnie znajdźmy naszą klasę content.

4:54Ona jest chyba w layout kropka content.

4:58Tak więc zostawmy tutaj ekran na białe.

5:05I ponownie zobaczmy, co się wydarzy.

5:07Przygotowało się.

5:09I dalej nie zadziałało.

5:11Czy na pewno zaktualizowana transpozycja?

5:14Transition od transition do czarnego.

5:20Powinno być ok.

5:22Ale spróbuj jeszcze ustawić na nie tylko MID.

5:28Pomijając fakt, że.

5:31Ta animacja nie byłaby animacją, którą chciałbym widzieć.

5:36To powinno zadziałać.

5:37W związku z czym jestem troszkę

5:38zaskoczony, bo także Live act i Page Interactive powinny tutaj funkcjonować.

5:46Hall i z powrotem na Transform skala 0 to chyba ona się aplikuje.

5:56Tak ona się aplikuje definitywnie.

6:02I na wyjściu i na wyjściu.

6:05Dlaczego coś nie aplikuje?

6:06To jest dobre pytanie.

6:08No w każdym razie być może są jakieś reguły, których nie do końca rozumiem, jak

6:13działają wewnątrz deklaracje tychże tranzycji.

6:16W każdym razie to co możemy zrobić, to przy pomocy tych selektorów.

6:21Tworzyć różnego rodzaju animacje.

6:23Ja tutaj to zostaje po prostu na oba sety.

6:30I zmienię to z powrotem na Obsidian.

6:340.

6:36I tutaj troszkę krótsza animacja, żeby to tak nie męczyło oczu.

6:42I w tym momencie to na pewno będzie nam działało w jedną stronę, co nie wchodzi.

6:46Zastanawiam się czy to jest kwestia tego,

6:47że to jest error page i on jako error może mieć inne.

6:53Inne style. Jeżeli wchodzimy

6:56ze strony głównej na login to tutaj wygląda ta animacja ładnie.

7:01I wracając na stronę główną.

7:02Tutaj swoją drogą widzimy taki loading.

7:06To też wygląda dobrze, w związku z czym prawdopodobnie strony 404 mają tutaj

7:11inne zasady, które być może powinniśmy tutaj zaadaptować.

7:16W każdym razie warto o tym wiedzieć.

7:17Tyle, że te klasy zadziałają tylko i wyłącznie na linkach tekstowych.

7:22Musimy używać plików tekstowych, aby to poprawnie zadziałało.

7:25Wtedy page nam się ładnie oznaczają, który

7:29jest aktywny, który jest nieaktywny i mamy taki efekt animacji dostępny w tekście.

7:33Jest to dosyć błahe w kontekście tego, co może cały

7:37tekst, w związku z czym nie skupiał bym na tym zbyt dużej uwagi.

7:42Ale jeżeli mamy taką potrzebę, no to

7:44jesteśmy w stanie tworzyć takie przejścia pomiędzy podstronami.