CSS View Transitions Generator

/* View Transitions CSS */

/* Define the transition name on the element */
.page-content {
  view-transition-name: page-content;
}

/* Animation for the old (exiting) state */
::view-transition-old(page-content) {
  animation: page-content-out 300ms ease-out both;
}

/* Animation for the new (entering) state */
::view-transition-new(page-content) {
  animation: page-content-in 300ms ease-out both;
}

/* Keyframes for exit animation */
@keyframes page-content-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* Keyframes for enter animation */
@keyframes page-content-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Root transition (optional - affects entire page) */
::view-transition-group(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-out;
}

/* Custom element transitions */

.header {
  view-transition-name: header;
}

::view-transition-old(header),
::view-transition-new(header) {
  animation-duration: 300ms;
  animation: none;
}

.main-content {
  view-transition-name: main-content;
}

::view-transition-old(main-content),
::view-transition-new(main-content) {
  animation-duration: 300ms;
  
}

/* Cross-fade fallback for unsupported browsers */
@supports not (view-transition-name: none) {
  .page-transition-enter {
    animation: fade-in 300ms ease-out;
  }
  .page-transition-exit {
    animation: fade-out 300ms ease-out;
  }
}

// View Transitions API Usage

// Check for browser support
const supportsViewTransitions = 'startViewTransition' in document;

// Basic navigation with View Transitions
async function navigateWithTransition(url) {
  if (!supportsViewTransitions) {
    // Fallback for unsupported browsers
    window.location.href = url;
    return;
  }

  // Start the view transition
  const transition = document.startViewTransition(async () => {
    // Fetch and update the new content
    const response = await fetch(url);
    const html = await response.text();

    // Parse and update the DOM
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    // Update specific elements
    document.querySelector('.page-content').innerHTML =
      doc.querySelector('.page-content').innerHTML;
  });

  // Optional: Wait for transition to complete
  await transition.finished;
}

// For SPA frameworks (React, Vue, etc.)
function startTransition(updateDOM) {
  

  if (!supportsViewTransitions) {
    updateDOM();
    return Promise.resolve();
  }

  return document.startViewTransition(() => {
    updateDOM();
  }).finished;
}

// React Hook example
function useViewTransition() {
  const [isPending, setIsPending] = React.useState(false);

  const startTransition = React.useCallback((callback) => {
    if (!supportsViewTransitions) {
      callback();
      return;
    }

    setIsPending(true);
    document.startViewTransition(() => {
      callback();
    }).finished.finally(() => {
      setIsPending(false);
    });
  }, []);

  return { isPending, startTransition };
}

// Example: Link click handler
document.querySelectorAll('a[data-transition]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    navigateWithTransition(link.href);
  });
});