View transitions API in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a view transition is triggered in Astro?

Consider an Astro component that uses the View Transitions API to animate between two states. What is the visible effect when the transition starts?

Astro

const startTransition = () => {
  document.startViewTransition(() => {
    // Change DOM or state here
  });
};

A The page instantly changes without animation.

B The page reloads completely causing a flicker.

C The page smoothly animates between the old and new DOM states.

D The page freezes until the transition callback finishes.

💡 Hint

Think about what the View Transitions API is designed to do visually.

The View Transitions API animates the change between the old and new DOM states smoothly, providing a seamless visual effect.

📝 Syntax

intermediate

Which code snippet correctly starts a view transition in Astro?

Choose the correct syntax to start a view transition that updates the DOM inside the callback.

A

document.startViewTransition(() => {
  document.body.textContent == 'New content';
});

B

document.startViewTransition {
  () => document.body.textContent = 'New content';
};

C

document.startViewTransition(() =>
  document.body.textContent = 'New content'
);

D

document.startViewTransition(() => {
  document.body.textContent = 'New content';
});

💡 Hint

Look for correct function call syntax with arrow function and braces.

Option D uses the correct syntax: a function call with an arrow function and braces to update the DOM.

🔧 Debug

advanced

Why does this view transition code cause no animation?

Given this code snippet, why does the view transition not animate as expected? const updateContent = () => { document.startViewTransition(() => { // No DOM changes here }); };

Astro

const updateContent = () => {
  document.startViewTransition(() => {
    // No DOM changes here
  });
};

A Because the callback does not change the DOM, so no animation occurs.

B Because startViewTransition requires a second argument for animation duration.

C Because the function must be async to animate properly.

D Because the DOM changes must happen outside the callback.

💡 Hint

Think about what triggers the animation in the View Transitions API.

The API animates between the old and new DOM states. If no DOM changes happen, there is nothing to animate.

❓ state_output

advanced

What is the state of the DOM during a view transition?

During a view transition started by startViewTransition, what DOM states are visible to the user?

A Only the old DOM state is visible until the transition ends.

B Both old and new DOM states are visually blended during the animation.

C Only the new DOM state is visible immediately when the callback runs.

D The DOM is hidden until the transition completes.

💡 Hint

Consider how the API creates a smooth visual effect between states.

The API overlays snapshots of old and new DOM states and animates between them, blending both visually.

🧠 Conceptual

expert

Which scenario best uses the View Transitions API in Astro?

Choose the scenario where using the View Transitions API provides the most benefit.

A Animating a page content change triggered by user navigation.

B Running background scripts without user interface updates.

C Loading data from an API without changing the DOM.

D Instantly replacing a static header with no visual changes.

💡 Hint

Think about when smooth visual transitions improve user experience.

Animating page content changes during navigation creates a smooth user experience, which is the main use case for the API.

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