View Transitions API: Animações Nativas SPA

View Transitions API traz animações nativas do navegador para navegações entre páginas.

O Problema

Em SPAs (React, Vue), transições são suaves:

<AnimatePresence>
  <motion.div key={page} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
    {content}
  </motion.div>
</AnimatePresence>

Em MPAs (tradicionais), navegação é abrupta: flash branco, sem continuidade.

View Transitions: O Melhor dos Dois Mundos

A API permite transições suaves em MPAs:

// SPA (React Router, Next.js)
document.startViewTransition(() => {
  // Atualizar o DOM
  navigate('/nova-pagina');
});

O navegador:

Captura um snapshot da página atual
Atualiza o DOM
Anima do estado antigo → novo

Exemplo: Fade In/Out

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

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

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

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

Named Transitions: Elementos Específicos

Animar elementos individuais:

<img src="product.jpg" style="view-transition-name: product-image">

::view-transition-old(product-image),
::view-transition-new(product-image) {
  /* Animação morphing da imagem */
  height: 100%;
  object-fit: cover;
}

Quando navegar para página de detalhe, a imagem faz morphing suave.

Next.js App Router

No Next.js 14+, ative com uma flag:

// next.config.js
module.exports = {
  experimental: {
    viewTransitions: true
  }
};

// app/template.js
'use client';
import { useEffect } from 'react';

export default function Template({ children }) {
  useEffect(() => {
    if ('startViewTransition' in document) {
      // Já ativado automaticamente
    }
  }, []);
  
  return children;
}

Astro: View Transitions Nativo

Astro tem suporte first-class:

---
// layout.astro
import { ViewTransitions } from 'astro:transitions';
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

Qualquer <a href> vira transição suave automaticamente.

Performance

View Transitions são GPU-accelerated. Sem JavaScript overhead.

Comparação:

Framer Motion: ~30KB JS
View Transitions: 0KB (nativo)

Suporte

✅ Chrome 111+
✅ Edge 111+
⏳ Safari (em desenvolvimento)
⏳ Firefox (em desenvolvimento)

Polyfills disponíveis para fallback.

Quando Usar?

✅ Sites de conteúdo (blogs, portfolios)
✅ E-commerce (transições produto → detalhe)
✅ Dashboards MPA

❌ Não necessário em SPAs pesadas (já têm transições)

Conclusão: View Transitions eliminam a principal vantagem dos SPAs. MPAs agora são competitivos.