Snažíme-li se webovou stránku vytvářet s ohledem na krásu (s využitím animací a různých plynulých přechodů), může působit přechod mezi dvěma stránkami lehce rušivě. Zvlášť potom u komplikovanějších layoutů lze pozorovat nepěkné probliknutí, než si prohlížeč přechroupe HTML, CSS a JavaScript.

První možnost, jak se tomuto vyhnout, je použít AJAX a veškerý obsah načítat asynchronně.

To díky history.pushState sice jde řešit i s používáním normálních URL, ale stránka se stává náchylnější k chybám, kdy drobná chyba v JS může znefunkčnit celou navigaci na webu. Klasický přechod mezi stránkami je vlastně takový restart všech skriptů.

Kromě toho je zajaxování webu relativně pracné.

Skrytí a zobrazení animací

Řešením proto může být:

1. Použití skrývací animace před opuštěním stránky.
2. Použití zobrazovací animace na začátku načtení stránky.

Potřebnou animaci stačí vytvořit pomocí @keyframes a přiřadit ji do vlastnosti animation). Zpětný průchod animací zajistí klíčové slovo reverse.

Objevovací animace se spustí při načtení stránky.

Animace zmizení bude vyvolána po kliknutí na odkaz mířící pryč. Získat všechny odkazy na stránce jde z document.links. Nabízelo by se možná použít událost onbeforeunload, nicméně nejspíš ji nejde rozumně časovat, takže by nešlo garantovat přehrání ukončovací animace.

Živá ukázka

• Živá ukázka
• GitHub

Odkazy jinam

• jquery.smoothState.js (použití v praxi)