View transitions API in Astro - Step-by-Step Execution

Concept Flow - View transitions API

User triggers view change

↓

Start view transition

↓

Capture current view snapshot

↓

Load new view content

↓

Animate transition between views

↓

Replace old view with new view

↓

End view transition

The View transitions API captures the current view, loads the new view, animates between them, and then replaces the old view with the new one.

Execution Sample

Astro

const container = document.querySelector('#app');
container.style.viewTransitionName = 'fade';
document.startViewTransition(() => {
  container.innerHTML = '<p>New content loaded</p>';
});
// The browser animates the transition automatically

This code triggers a view transition by naming the transition and changing the content inside a container.

Execution Table

Step	Action	View State Before	View State After	Transition Animation
1	User clicks button to change view	Old content visible	Old content visible	No animation yet
2	Set viewTransitionName on container	Old content visible	Old content visible	Prepare for animation
3	Change container innerHTML to new content	Old content visible	New content ready but not visible	Start fade animation from old to new
4	Browser animates transition	Old content visible	New content visible	Fade effect runs smoothly
5	Transition ends, old content replaced	Old content visible	New content visible	Animation complete

💡 Transition ends after animation completes and new content is fully visible

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5
container.innerHTML	"<p>Old content</p>"	"<p>Old content</p>"	"<p>New content loaded</p>"	"<p>New content loaded</p>"
container.style.viewTransitionName	""	"fade"	"fade"	"fade"

Key Moments - 2 Insights

Why does the old content remain visible after setting viewTransitionName but before changing innerHTML?

Because setting viewTransitionName only prepares the container for animation; the content changes happen after, as shown in step 3 of the execution_table.

How does the browser know when to start the animation?

The browser starts animating automatically when the content inside the container changes after viewTransitionName is set, as seen between steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the container.innerHTML after step 3?

A "<p>New content loaded</p>"

B ""

C "<p>Old content</p>"

D undefined

💡 Hint

Check the 'View State After' column at step 3 in the execution_table.

At which step does the fade animation start according to the execution_table?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Transition Animation' column to see when the animation runs.

If we did not set viewTransitionName, what would happen to the animation?

A Content would not change

B Animation would still run automatically

C Animation would not run

D Browser would throw an error

💡 Hint

Refer to variable_tracker for the role of viewTransitionName in triggering animation.

Concept Snapshot

View transitions API lets you animate changes between views.
Set viewTransitionName on a container.
Change the container content.
Browser animates old to new view smoothly.
No manual animation code needed.
Ends when new content fully replaces old.

Full Transcript

The View transitions API helps create smooth animations when changing views in a web app. First, the user triggers a view change. The code sets a special style property called viewTransitionName on the container holding the content. This tells the browser to prepare for an animation. Then, the content inside the container changes. The browser automatically captures the old view and the new view, and animates between them, for example with a fade effect. After the animation finishes, the old content is replaced fully by the new content. This process makes the user experience smooth and visually appealing without extra animation code.

Practice

1. What is the main purpose of the startViewTransition method in the View Transitions API?

easy

A. To stop all animations on the page immediately.

B. To fetch data from a server before rendering a view.

C. To create a new HTML element dynamically.

D. To animate changes smoothly between different views or states in the UI.

Solution

1. Step 1: Understand the role of startViewTransition

   This method wraps DOM updates to animate the transition between views smoothly.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated actions like fetching data, creating elements, or stopping animations, which are not the purpose of this API.

3. Final Answer:

   To animate changes smoothly between different views or states in the UI. -> Option D

4. Quick Check:

   View Transitions = Smooth animation [OK]

Hint: Remember: startViewTransition animates view changes smoothly [OK]

Common Mistakes:

• Confusing it with data fetching methods
• Thinking it creates new elements
• Assuming it stops animations

2. Which of the following is the correct syntax to start a view transition using the View Transitions API?

easy

A. startViewTransition = updateDOM();

B. startViewTransition(() => { updateDOM(); });

C. startViewTransition.updateDOM();

D. startViewTransition[updateDOM];

Solution

1. Step 1: Recall the method signature

   The startViewTransition method takes a callback function that performs DOM updates.

2. Step 2: Check each option's syntax

   startViewTransition(() => { updateDOM(); }); correctly calls startViewTransition with a function. Options A, B, and D use invalid syntax or assignment.

3. Final Answer:

   startViewTransition(() => { updateDOM(); }); -> Option B

4. Quick Check:

   Function callback syntax = startViewTransition(() => { updateDOM(); }); [OK]

Hint: Use a function inside startViewTransition to update DOM [OK]

Common Mistakes:

• Using dot notation incorrectly
• Assigning instead of calling the function
• Using brackets instead of parentheses

3. Consider this code snippet using the View Transitions API:

startViewTransition(() => {
  document.getElementById('content').textContent = 'New content';
});
console.log(document.getElementById('content').textContent);

What will the console output show immediately after this code runs?

medium

A. Old content

B. undefined

C. New content

D. An error is thrown

Solution

1. Step 1: Understand the timing of DOM updates inside startViewTransition

   The callback inside startViewTransition runs synchronously, so the DOM textContent changes immediately.

2. Step 2: Check the console.log output

   Since the DOM is updated before the console.log runs, it prints the new content string.

3. Final Answer:

   New content -> Option C

4. Quick Check:

   DOM updates inside callback are immediate [OK]

Hint: DOM changes inside callback happen before next line runs [OK]

Common Mistakes:

• Thinking update is delayed or asynchronous
• Expecting old content to print
• Assuming an error due to API usage

4. You wrote this code but the view transition animation does not run:

startViewTransition(() => {
  const newDiv = document.createElement('div');
  newDiv.textContent = 'Hello';
});

What is the most likely reason the animation is missing?

medium

A. The new element was created but not added to the DOM.

B. startViewTransition requires an async function.

C. You must call animate() manually after updates.

D. The API only works with text content changes.

Solution

1. Step 1: Check what the callback does

   The code creates a new element but does not insert it into the page DOM.

2. Step 2: Understand animation triggers

   View transitions animate visible DOM changes. Since the new element is not added, no visible change occurs, so no animation.

3. Final Answer:

   The new element was created but not added to the DOM. -> Option A

4. Quick Check:

   Visible DOM changes trigger animation [OK]

Hint: Always add new elements to DOM inside callback for animation [OK]

Common Mistakes:

• Thinking async is required
• Believing manual animate() calls are needed
• Assuming API only works with text changes

5. You want to animate a view transition that changes the text inside a <div id='message'> only if the new text is different from the current text. Which code correctly uses the View Transitions API to do this efficiently?

hard

A. if (document.getElementById('message').textContent !== 'Hello') {
startViewTransition(() => {
document.getElementById('message').textContent = 'Hello';
});
}

B. startViewTransition(() => {
document.getElementById('message').textContent = 'Hello';
});

C. if (document.getElementById('message').textContent === 'Hello') {
startViewTransition(() => {
document.getElementById('message').textContent = 'Hello';
});
}

D. startViewTransition(async () => {
await fetch('/message');
document.getElementById('message').textContent = 'Hello';
});

Solution

1. Step 1: Check the condition to avoid unnecessary updates

   if (document.getElementById('message').textContent !== 'Hello') { startViewTransition(() => { document.getElementById('message').textContent = 'Hello'; }); } updates the text only if it differs, preventing redundant transitions.

2. Step 2: Verify the use of startViewTransition

   if (document.getElementById('message').textContent !== 'Hello') { startViewTransition(() => { document.getElementById('message').textContent = 'Hello'; }); } correctly wraps the DOM update inside the callback, enabling animation only when needed.

3. Final Answer:

   Update only if text differs, then wrap in startViewTransition callback. -> Option A

4. Quick Check:

   Conditional update + callback = if (document.getElementById('message').textContent !== 'Hello') { startViewTransition(() => { document.getElementById('message').textContent = 'Hello'; }); } [OK]

Hint: Check text difference before startViewTransition to avoid useless animations [OK]

Common Mistakes:

• Always updating without condition wastes animations
• Using async fetch inside callback unnecessarily
• Triggering transition when text is unchanged