View transitions API in Astro - Mini Project: Build & Apply

Smooth Page Change with View Transitions API in Astro

📖 Scenario: You are building a simple Astro website with two sections: Home and About. You want to make switching between these sections smooth and visually appealing using the View Transitions API.

🎯 Goal: Create an Astro component that toggles between Home and About content with a smooth view transition effect when the user clicks a button.

📋 What You'll Learn

Create a variable to hold the current view state

Add a button to toggle the view state

Use the View Transitions API to animate the content change

Ensure the content updates inside a container with a unique ID

💡 Why This Matters

🌍 Real World

Smooth transitions between page sections improve user experience on websites and apps by making content changes feel natural and less jarring.

💼 Career

Understanding and using the View Transitions API is valuable for frontend developers to create modern, polished interfaces that delight users.

1

Set up the initial view state

Create a reactive variable called currentView and set it to the string 'home' inside the <script setup> block.

Astro

// Your code here



  

Hint

Use ref from Vue to create a reactive variable named currentView and initialize it with 'home'.

2

Add a toggle button for views

Add a <button> element below the <script setup> that toggles currentView between 'home' and 'about' when clicked. Use an inline arrow function for the click event handler.

Astro

import { ref } from 'vue';
const currentView = ref('home');


 {}">
  Toggle View



  

Hint

Use the @click directive with an arrow function that switches currentView.value between 'home' and 'about'.

3

Render content based on current view with transition

Inside the div with id="view-container", use a <template> with v-if="currentView.value === 'home'" and v-else to show <p>Home Content</p> when currentView is 'home' and <p>About Content</p> when it is 'about'. Update the button's @click handler to wrap the currentView toggle inside document.startViewTransition(() => { ... }) to animate the content change.

Astro

import { ref } from 'vue';
const currentView = ref('home');

// Your code here


 { currentView.value = currentView.value === 'home' ? 'about' : 'home' }">
  Toggle View



  

Hint

Wrap the currentView toggle inside document.startViewTransition(() => { ... }) in the button's @click handler. Use <template v-if="currentView.value === 'home'"> and <template v-else> inside the container to conditionally render the paragraphs.

4

Complete the component with accessibility and container ID

Ensure the div with id="view-container" has an aria-live="polite" attribute for accessibility. Confirm the toggle button has an aria-label="Toggle between Home and About views" attribute. These complete the smooth and accessible view transition component.

Astro

import { ref } from 'vue';
const currentView = ref('home');


 document.startViewTransition(() => { currentView.value = currentView.value === 'home' ? 'about' : 'home' })" aria-label="">
  Toggle View



  
    Home Content
  
  
    About Content
  

Hint

Add aria-live="polite" to the container div and aria-label="Toggle between Home and About views" to the toggle button for accessibility.

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