Web concepts

Question 1

What is ViewTransition?

Answer 1

The View Transition API is a modern web feature that enables smooth, animated transitions between different states or pages in web applications. It simplifies creating visually engaging transitions that enhance user experience by reducing perceived load times and maintaining context during navigation.

Question 2

Where you can use ViewTransition?

Answer 2

Supports both SPAs and MPAs:

Same-document transitions: Animate DOM changes within a single-page app (e.g., filtering a list).

Cross-document transitions: Navigate between pages in multi-page apps while animating shared elements (e.g., expanding a thumbnail to a full-size image).

Question 3

How is ViewTransition working?

Answer 3

The ViewTransition API works by capturing snapshots of the current and incoming page states, overlaying them in a pseudo-element layer, then animating between them using CSS.

// Toggle content with cross-fade transition
function toggleContent(newContent: string): void {
  if (!document.startViewTransition) {
    // Fallback for unsupported browsers
    updateContentDirectly(newContent);
    return;
  }

  const transition = document.startViewTransition(() => {
    const contentEl = document.getElementById('content');
    if (contentEl) contentEl.textContent = newContent;
  });

  // Optional: Use transition promises for sequencing
  transition.ready.then(() => {
    console.log('Snapshot captured, animation starting');
  });
}

// Helper function for fallback
function updateContentDirectly(content: string): void {
  const el = document.getElementById('content');
  if (el) el.textContent = content;
}

// Usage with button click
document.getElementById('toggle-btn')?.addEventListener('click', () => {
  toggleContent(Math.random() > 0.5 ? "New Content" : "Alternate Content");
});

/* Basic cross-fade animation */
\::view-transition-old(root) {
  animation: fade-out 0.5s ease-in-out;
}

\::view-transition-new(root) {
  animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Optional: Tag specific elements */
#content {
  view-transition-name: content-block;
}