CSS View Transitions so novejša (eksperimentalna) tehnologija, ki omogoča gladke, aplikacijam podobne prehode med stranmi, brez kompleksnega JavaScript-a.
Poenostavljeno bi lahko slednje razložili, da brskalnik “posname” staro in novo stanje strani ter poskrbi za animacijo vmes. Sama animacija pa je v osnovi podobna menjavi slidov pri prezentacijah.
Kaj so CSS View Transitions in zakaj jih lahko uporabljamo?
- prehodi med dvema stranema
- prehod med pogledi, npr. SPA aplikacije
- animirani prehodi istega elementa ob spremembah
CSS View Transitions nam tako prinašajo UX, ki smo ga navajeni v mobilnih aplikacijah v sam brskalnik in spletne strani. Slednje smo sicer lahko ponaredili v brskalniku, ampak so bili kompleksni in požrešni. Sedaj imamo manj kode, podporo brskalnikov (razen Firefox in IE) in hitro implementacijo.
Najbolj enostaven primer uporabe
Spodaj je primer najbolj enostavne uporabe. Enako kodo uporablja tudi ta blog.
@view-transition { navigation: auto; }Slabost te metode je, da animira vse linke, notranje in zunanje, listanje, … kar pomeni da je lahko včasih preveč. Trenuten test na blogu, ki ni zahtevna stran je zadovoljiv, zato tudi ostaja.
Podpora brskalnikov je precej dobra, saj le Firefox ne podpira tega in IE. Stanje lahko preveriš tukaj: @view-transition. Vedno pa uporabi progresivno nadgradnjo, kar pomeni, da stran vedno dela ne glede na to, ali uporabnikova naprava to tehnologijo podpira.
