"Imagine if your site could animate smoothly between pages - taking you from say index.html to about.html - without a jarring reload. Well, this is possible now, thanks to the support for View Transition API in modern browsers. View transitions were once exclusive to single-page applications ( SPAs). In this post, we'll explore how view transitions bring smooth, animated navigation to multi-page applications (MPAs)."
"Multi-page applications (MPAs) and single-page applications (SPAs) are two common approaches to web development, each with its own advantages and disadvantages. An MPA loads a new page from the server for each navigation, resulting in a full page reload. MPAs are simpler to build for large apps with many distinct pages. An SPA, on the other hand, loads a single HTML page and updates its content dynamically via JavaScript, offering faster interactions and a smoother user experience,"
View transitions enable smooth animated navigation between pages without full reloads, bringing SPA-like interactions to multi-page applications. Multi-page applications (MPAs) load a new page from the server for each navigation, causing full page reloads but remaining simpler for large apps with many distinct pages. Single-page applications (SPAs) load a single HTML page and update content via JavaScript, offering faster interactions while requiring more complex client-side routing and state management. The View Transition API and the CSS @view-transition at-rule allow MPAs to animate between pages with progressive enhancement so unsupported browsers fall back gracefully. Level 1 supports within-page transitions and is available in Chrome, Edge, and Safari, with Firefox beta. Level 2 supports cross-page transitions and is available in Chrome 126+, Edge 126+, and Safari 18.2+.
Read at MDN Web Docs
Unable to calculate read time
Collection
[
|
...
]