Przejście fade-in między postronami w SPA

Potrzebuję stworzyć stronę typu menu, która będzie wyświetlana na ekranie typu kiosk. Czyli z lewej strony kilka przycisków, a z prawej content. Z tego co rozumiem, to są 2 podejścia:
a) każda pozycja menu to osobny html
b) każda pozycja menu to osobny div (display none/block)

Ekran nie będzie przewijany.

Zależy mi na efekcie płynnego przejścia tj. efekt fade in/fade out, więc myślę o drugiej opcji.

I teraz zasadnicze pytanie: czy będzie to ok, by na jednej takiej stronie, w tym samym miejscu było kilka elementów typu DIV, z których tylko jeden ma dispaly: block, a reszta none? Do tego właściwość transition 0.4s i faktycznie jest ten efekt typu fade.

Ale pomyślmy, na DOM mam w tym samym miejscu powieszone różne DIVy z różnymi elementami (prosty button i pole tekstowe). Czy to nie yebnie? Na razie frameworka nie chciałbym ruszać, to dopiero prototyp.

każda pozycja menu to osobny html

Możesz wyjaśnić co masz na myśli?
Czym jest "osobny HTML"? Za bardzo tego nie rozumiem.

Na każdej stronie menu jest to samo (inny jest tylko kolor przycisku), a content inny.

rafal95p napisał(a):

Na każdej stronie menu jest to samo (inny jest tylko kolor przycisku), a content inny.

jakiej natury jest ten content?
Stały / pólstały / wybitnie zmienny ?
Charakter contentu jest taki sam (zawsze swobodny tekst, tylko inny) czy odmienny w zakładkach ?

Do czego piję ? Do zasialnia tego pewnie z jakiegos backendu

Content jest stały:

• kilka przycisków, które wizualnie nic nie zmieniają
• kilka pól tekstowych, których zawartość jest fetchowana co kilka sekund

Oba powyższe "ubiorę" w mały DIV, który będzie takim niby widgtem. A same widgety wewnątrz contentu rozmieszczę flexem.

rafal95p napisał(a):

Zależy mi na efekcie płynnego przejścia tj. efekt fade in/fade out, więc myślę o drugiej opcji.

I teraz zasadnicze pytanie: czy będzie to ok, by na jednej takiej stronie, w tym samym miejscu było kilka elementów typu DIV, z których tylko jeden ma dispaly: block, a reszta none? Do tego właściwość transition 0.4s i faktycznie jest ten efekt typu fade.

No tak, to byłoby okej i chyba jedyny sposób żeby osiągnąć przejście fade-in.

cerrato napisał(a):

każda pozycja menu to osobny html

Możesz wyjaśnić co masz na myśli?
Czym jest "osobny HTML"? Za bardzo tego nie rozumiem.

On mówi o SPA i MPA w skrócie ;)

jest robione jeszcze coś takiego jak View Transitions API
https://developer.chrome.com/docs/web-platform/view-transitions/
chociaż nie do końca rozumiem, jak to działa (spróbowałem odpalić te przykłady kopiując po prostu CSS i nie zadziałało. Ale tam jeszcze piszą o tym, że w JS się coś robi)

No i widzę, że wsparcie przeglądarek jest słabiutkie na razie: https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition
na większości przeglądarek to nawet nie zadziała obecnie (chociaż jeśli to ma być robione na ekranie typu kiosk, to będzie zawsze taka sama przeglądarka, czy jak to działa?).

Skoro to SPA, zapewne z użyciem któregoś z popularnych frameworków, to nie chcesz

a) każda pozycja menu to osobny html
b) każda pozycja menu to osobny div (display none/block)

raczej Router i komponenty

Chodziło mi o coś takiego: https://github.com/rafal95p/fadeEffect

rafal95p napisał(a):

Chodziło mi o coś takiego: https://github.com/rafal95p/fadeEffect

No to to jest normalne podejście.

Jeśli będziesz miał wiele plików osobnych i otwierał wiele URL'i to przeładujesz stronę, i wtedy ciężko to animować. Musiałbyś wtedy to obejść tak, że i tak musiałbyś napisać JS'a który wczyta te html'e, podmieni lokację oraz podmieni kontent; ale jak już masz tak robić to lepiej to zrobić na jednym JS'ie.

Dowolny framework np. Vue, kilkanaście minut i efekt osiągnięty...
W przypadku akurat Vue byłoby to vue + vue-router + transition (wbudowane w vue), a konkretna animacja albo z palca w CSS albo np. animate.css i gotowe :)

Tylko najpierw trzeba ogarniać "dowolny framework".

Ale to na tym polega zabawa, żeby się nauczyć właśnie.

No to ok, myślę nad Reactem. Czemu? Nie trzeba poświęcać czasu na TypeScript i podobno dobry na początek.

rafal95p napisał(a):

No to ok, myślę nad Reactem. Czemu? Nie trzeba poświęcać czasu na TypeScript i podobno dobry na początek.

W żadnym frameworku nie trzeba znać TS'a.