Jeden z nejvíce přehlížených pokroků webové platformy posledních let je tady: View Transitions API přešlo ze stavu experimentu do stabilní podpory napříč hlavními prohlížeči. Pro klasický vícestránkový web to znamená, že tým může mít animované přechody mezi stránkami v úrovni nativní aplikace – a to bez Reactu, Vue nebo jakéhokoli SPA frameworku.
Co View Transitions API umí
API poskytuje dva základní scénáře. Same-document transitions umožňují animovat změny v rámci jedné stránky – typicky při filtrování, řazení nebo otevírání modálního okna. Cross-document view transitions jsou ta opravdová revoluce: prohlížeč udělá snapshot odcházející stránky, načte novou, a animovaně přepne mezi nimi. Z pohledu uživatele to vypadá jako jednolitá aplikace, i když pod tím je čistý multi-page web.
Chrome cross-document View Transitions přidal už ve verzi 126, Safari následovalo v 18.2 a od roku 2026 je podpora ve všech hlavních prohlížečích. Pro marketingový web, dokumentační portál, blog nebo e-shopový přechod ze seznamu na detail produktu je to v roce 2026 jeden z nejvyšších pákových efektů, které webová platforma nabízí.
Jak to nasadit v praxi
Pro nejjednodušší cross-document transitions stačí dvě věci. Do <head> obou stránek přidáte metatag:
<meta name="view-transition" content="same-origin">A v CSS doplníte animační pravidla:
::view-transition-old(root) {
animation: fade-out 0.3s ease;
}
::view-transition-new(root) {
animation: fade-in 0.3s ease;
}Hotovo – navigace mezi stránkami se animovaně překryje. Žádná knihovna, žádný build step, žádný JavaScript. Pro pokročilejší scénáře přidejte view-transition-name u prvků, které mají „přeletět“ z jedné stránky na druhou (typicky obrázek produktu na detail).
Co je nového v roce 2026
V Chrome 147 přibyly tzv. element-scoped transitions, které dovolují animovat jen vybranou část stránky místo celého viewportu. To je zásadní pro výkon – nemusíte animovat header a footer při každé navigaci. V testování jsou rovněž two-phase transitions, kde nejdřív zmizí stará stránka a teprve poté se zobrazí nová s vlastní animací příchodu, což otevírá dveře sofistikovanějšímu storytellingu.
Výkonové dopady a SEO bonus
Přechody jsou plně nativní, takže běží mimo hlavní JavaScript thread a nezatěžují INP. Webový vývojář navíc dostane lepší skóre v Core Web Vitals jen tím, že nahradí client-side router za nativní MPA navigaci s View Transitions – kratší TTI, lepší INP a v řadě případů i lepší LCP. A protože jde o klasické HTML stránky, jsou indexovatelné stejně jako kdykoli předtím, na rozdíl od některých SPA řešení.
Závěr
View Transitions API je odpověď na otázku, proč si vůbec stavět složitou SPA. V roce 2026 dostáváte plynulé přechody, lepší výkon a stejně dobré SEO – a to s podstatně menším množstvím kódu. Chystáte redesign webu nebo zvažujete, jestli zbytečně nevedete bitvu se SPA framework, který nepotřebujete? Ozvěte se – probereme, jestli vám moderní webová platforma neušetří měsíce vývoje.
