View Transitions Generator

View Transitions Generator

🎯 Mission

Implémenter des transitions fluides entre pages et états avec l'API View Transitions pour une expérience utilisateur moderne.

🎨 View Transitions API

Helper Function

// lib/view-transitions.ts

export function startViewTransition(callback: () => void): void {
  if (typeof document !== 'undefined' && 'startViewTransition' in document) {
    (document as any).startViewTransition(callback);
  } else {
    // Fallback pour navigateurs non supportés
    callback();
  }
}

Usage avec Navigation

'use client';

import { useRouter } from 'next/navigation';
import { startViewTransition } from '@/lib/view-transitions';

export function ClubCard({ club }: Props) {
  const router = useRouter();

  const handleClick = () => {
    startViewTransition(() => {
      router.push(`/clubs/${club.id}`);
    });
  };

  return (
    <div style={{ viewTransitionName: `club-${club.id}` }}>
      {/* ... */}
    </div>
  );
}

CSS Animations

/* app/globals.css */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

/* Specific elements */
[style*="view-transition-name"] {
  contain: layout;
}

/* Custom animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

::view-transition-new(club-card) {
  animation: fade-in 0.3s ease-in-out;
}

Patterns

Page Navigation:

const navigate = (path: string) => {
  startViewTransition(() => router.push(path));
};

State Changes:

const toggleView = () => {
  startViewTransition(() => setView('grid'));
};

✅ Checklist

• Helper startViewTransition() créé
• CSS animations définies
• view-transition-name sur éléments clés
• Fallback pour navigateurs non supportés
• Utilisé pour TOUTES les navigations

Rappel: MANDATORY pour toutes navigations = UX moderne et fluide.