Navegaciones fluidas, similares a las de una aplicación, gracias a la API de transiciones de vista en Next.js

La API de transiciones de vista permite a los navegadores animar entre estados del DOM con menos código personalizado para las animaciones. En proyectos de Next.js App Router, se combina naturalmente con las navegaciones del cliente cuando se desea continuidad en los elementos compartidos en lugar de cortes bruscos.

Qué es

Es una función del navegador que toma instantáneas de los estados antiguos y nuevos e interpola entre ellos. Usted decide activarla, nombra los elementos compartidos y personaliza con CSS donde sea necesario.

function navigateWithTransition(callback: () => void) {
  if (!document.startViewTransition) {
    callback();
    return;
  }

  document.startViewTransition(() => {
    callback();
  });
}

Por qué funciona bien en Next.js

Las transiciones de rutas del lado del cliente ya reemplazan a los grandes árboles de vista. Las transiciones de vista le dan a ese reemplazo un lenguaje visual que los usuarios asocian con las aplicaciones nativas.

Soporte de navegadores y polyfills

El soporte está mejorando, pero no es universal. Decida si optar por una mejora progresiva o por polyfills; los polyfills añaden peso y una fidelidad imperfecta.

"use client";

import { useRouter } from "next/navigation";
export function TransitionLink() {
  const router = useRouter();
  function navigate() {
    if (!document.startViewTransition) {
      router.push("/dashboard");
      return;
    }
    document.startViewTransition(() => {
      router.push("/dashboard");
    });
  }
  return (
    <button onClick={navigate}>
      Dashboard
    </button>
  );
}

Patrones de integración

Habilita las transiciones en los desplazamientos, marca los elementos compartidos con nombres estables y evita que los diseños cambien bruscamente mediante el uso de espacio reservado.

.product-image {
  view-transition-name: product-image;
}

Personalización del movimiento

Los pseudo-seleccores view-transition de CSS te permiten ajustar la duración y la forma en que se produce el movimiento. Prefiere movimientos sutiles; las animaciones largas parecen más lentas de lo que son en realidad.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
}

::view-transition-old(root) {
  animation: fade-out 350ms ease;
}
::view-transition-new(root) {
  animation: fade-in 350ms ease;
}

Problemas técnicos, streaming y rendimiento

Evita animar elementos que se cargan tarde o que cambian de tamaño significativamente. Prueba con redes lentas. Prefiere transformar propiedades que sean compatibles con el compositor. Si los snapshots transmitidos no están alineados, retrasa la transición o limitala al cromo estático.

Utilice las transiciones de vista cuando sea importante la continuidad en la navegación y los navegadores de su audiencia lo permitan. Úselas con moderación cuando la densidad de información cambia más rápido de lo que la animación puede ayudar a manejar. Mantenga los componentes en buen estado, mida cada etapa por separado y evite lanzar productos basándose únicamente en intuiciones, sobre todo cuando la próxima versión podría reintroducir el mismo problema silencioso bajo un nombre diferente. Mantenga los componentes en buen estado, mida cada etapa por separado y evite lanzar productos basándose únicamente en intuiciones, sobre todo cuando la próxima versión podría reintroducir el mismo problema silencioso bajo un nombre diferente. Mantenga los componentes en buen estado, mida cada etapa por separado y evite lanzar productos basándose únicamente en intuiciones, sobre todo cuando la próxima versión podría reintroducir el mismo problema silencioso bajo un nombre diferente. Mantenga los componentes en buen estado, mida cada etapa por separado y evite lanzar productos basándose únicamente en intuiciones, sobre todo cuando la próxima versión podría reintroducir el mismo problema silencioso bajo un nombre diferente. Mantenga los componentes en buen estado, mida cada etapa por separado.

Mantenga los dispositivos en buen estado, mida cada etapa por separado, y se niegue a lanzar basándose únicamente en intuiciones cuando la próxima versión pueda reintroducir el mismo modo de fallo silencioso bajo un nombre diferente.En la próxima versión se puede volver a introducir el mismo modo de fallo silencioso bajo un nombre nuevo. Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a enviar el producto basándose únicamente en intuiciones, ya que la próxima versión puede volver a introducir el mismo modo de fallo silencioso bajo un nombre nuevo. Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a enviar el producto basándose únicamente en intuiciones, ya que la próxima versión puede volver a introducir el mismo modo de fallo silencioso bajo un nombre nuevo. Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a enviar el producto basándose únicamente en intuiciones, ya que la próxima versión puede volver a introducir el mismo modo de fallo silencioso bajo un nombre nuevo. Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a enviar el producto basándose únicamente en intuiciones, ya que la próxima versión puede volver a introducir el mismo modo de fallo silencioso bajo un nombre nuevo. Mantenga los dispositivos en buen estado, mida cada etapa por separado y se niegue a enviar el producto basándose únicamente en intuiciones, ya que la próxima versión puede volver a introducir el mismo sModo de fallo silencioso bajo un nuevo nombre.

Lecturas relacionadas

• Transiciones de vista con sensibilidad a la dirección en React con addTransitionType — Aprenda cómo addTransitionType etiqueta una transición en React con su causa para que ViewTransition, CSS y los controladores de eventos puedan elegir la dirección de desplazamiento sin necesidad de estado adicional.
• Previendo el desplazamiento acumulativo de la disposición con fondos video en Next.js — Conozca técnicas prácticas de CSS y disposición para evitar que los videos de fondo en Next.js causen desplazamiento acumulativo de la disposición en diferentes dispositivos y velocidades de red.