Q34: What is the CSS View Transitions API and how does it animate page transitions?
The View Transitions API creates animated transitions between DOM states or page navigations. Wrapping DOM updates inside document.startViewTransition() lets browsers take snapshots and execute CSS animations (::view-transition-old, ::view-transition-new) automatically.
View Transition DOM State Update
function updateDOM() {
document.startViewTransition(() => {
document.body.classList.toggle('dark-theme');
});
}💡 The browser cross-fades old and new document rendering snapshots automatically.
Key Takeaways
- Animates DOM state changes and multi-page transitions smoothly.
- Uses pseudo-element transition snapshots (
::view-transition-oldand::view-transition-new).
Knowledge Check
Which JavaScript method initializes a CSS View Transition state snapshot?