View transitions API in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a view transition when a button is clicked.

Astro

document.querySelector('button').addEventListener('click', () => {
  document.startViewTransition(() => {
    [1]
  });
});

Drag options to blanks, or click blank then click option'

Adocument.body.textContent = 'New content';

Balert('Clicked!');

Cwindow.location.reload();

Dconsole.log('Transition started');

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert or console.log inside the callback instead of changing DOM content.

Not changing any content inside the callback.

The startViewTransition method expects a callback that changes the DOM content to trigger the transition. Updating document.body.textContent inside the callback starts the view transition.

2fill in blank

medium

Complete the code to check if the View Transitions API is supported in the browser.

Astro

if ([1] in document) {
  console.log('View Transitions API is supported');
} else {
  console.log('Not supported');
}

Drag options to blanks, or click blank then click option'

AstartViewTransition

BviewTransition

CtransitionStart

DbeginViewTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like 'viewTransition' or 'transitionStart'.

Checking on window instead of document.

The method startViewTransition is the key function of the View Transitions API. Checking if it exists in document confirms support.

3fill in blank

hard

Fix the error in the code to properly use the View Transitions API to update a div's text.

Astro

const container = document.getElementById('container');

document.[1](() => {
  container.textContent = 'Updated content';
});

Drag options to blanks, or click blank then click option'

AstartTransition

BbeginTransition

CviewTransitionStart

DstartViewTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names that do not exist on elements.

Trying to call the method on the wrong object.

The correct method to start a view transition is startViewTransition on document. Other method names are invalid and cause errors.

4fill in blank

hard

Fill both blanks to create a view transition that changes the background color and text of a section.

Astro

const section = document.querySelector('section');

document.[1](() => {
  section.style.[2] = 'lightblue';
  section.textContent = 'Background changed';
});

Drag options to blanks, or click blank then click option'

AstartViewTransition

BbackgroundColor

Ccolor

DbeginTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' instead of 'backgroundColor' to change background.

Using incorrect method names like 'beginTransition'.

The method to start the transition is startViewTransition on document. To change the background color, use the CSS property backgroundColor.

5fill in blank

hard

Fill all three blanks to create a view transition that updates a list by adding a new item if the list has less than 5 items.

Astro

const list = document.querySelector('ul');

document.[1](() => {
  if (list.children.length [2] 5) {
    const newItem = document.createElement('[3]');
    newItem.textContent = 'New item';
    list.appendChild(newItem);
  }
});

Drag options to blanks, or click blank then click option'

AstartViewTransition

B<

Cli

DaddViewTransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names like 'addViewTransition'.

Using wrong comparison operators like '>' instead of '<'.

Creating wrong element types like 'div' instead of 'li'.

Use startViewTransition on document to start the transition. The condition checks if the list has less than 5 items using <. The new element to add is a list item li.

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