Intermediate LevelHTML & Semantic Web
How does the View Transitions API create smooth animated page navigations?
❓ Interview Prompt: Explain View Transitions API (document.startViewTransition), snapshotting old vs new DOM states, and CSS pseudo-elements.
The View Transitions API provides a simple native mechanism for animating DOM state changes and page navigations without complex CSS animation libraries.
How it Works:
1
Wrap DOM mutations in 'document.startViewTransition(() => updateDOM())'.
2
Browser captures a static screenshot snapshot of the old state.
3
Browser updates the DOM and captures a snapshot of the new state.
4
Animates between snapshots automatically using CSS '::view-transition-old' and '::view-transition-new' pseudo-elements!
Code Implementation Example
javascript
function updateContent() {
if (document.startViewTransition) {
document.startViewTransition(() => {
document.getElementById('card').innerText = 'Updated Content';
});
} else {
// Fallback for older browsers
document.getElementById('card').innerText = 'Updated Content';
}
}💡Executing smooth DOM state transition using document.startViewTransition.
🎯 Interview Key Takeaway
Use document.startViewTransition() to create smooth native animated transitions between DOM states.
#View Transitions#Animations#DOM API#Intermediate
Back to all HTML & Semantic Web Questions→