Cómo crear transiciones de página fluidas con la View Transitions API

1. La brecha de experiencia al navegar entre páginas

En el desarrollo web llevamos mucho tiempo ante un dilema de experiencia de usuario:

• Aplicaciones multipágina (MPA): Su arquitectura es sencilla y estable, pero cada navegación realiza una carga completa, lo que provoca una “pantalla blanca” o un “destello” y rompe la continuidad de la experiencia.
• Aplicaciones de una sola página (SPA): El enrutamiento frontend ofrece una experiencia fluida sin recargas, pero obliga a los desarrolladores a gestionar manualmente animaciones de transición complejas, el estado y la división del código, con un coste de desarrollo elevado.

¿Existe una forma de conservar la sencillez de una MPA y obtener al mismo tiempo las transiciones fluidas de una SPA? La View Transitions API nació precisamente para eso.

2. ¿Qué es la View Transitions API?

La View Transitions API es una API nativa del navegador que ofrece un mecanismo para crear fácilmente transiciones animadas entre dos estados distintos del DOM.

Su flujo de trabajo principal es muy sencillo:

1. Al iniciar una transición, la API toma una “captura” de la página actual (el estado anterior).
2. Después se actualiza el DOM al nuevo estado mediante JavaScript.
3. La API también toma una “captura” de la nueva página (el estado nuevo).
4. Por último, el navegador crea una transición predeterminada y fluida, normalmente un fundido cruzado, entre la “captura anterior” y la “captura nueva”.

El navegador gestiona todo esto eficientemente a bajo nivel; nosotros solo tenemos que llamar a una función sencilla.

3. ¿Cómo se utiliza?

Usar View Transitions en una aplicación de una sola página es muy sencillo. Basta con envolver la lógica que actualiza el DOM en la función document.startViewTransition.

// 假设你有一个更新页面内容的函数
async function updatePageContent(url) {
  const response = await fetch(url);
  const newHtml = await response.text();
  // 用新内容替换旧内容 (具体实现取决于你的架构)
  document.body.innerHTML = newHtml;
}

// 在导航链接的点击事件中调用
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();
  const url = event.target.href;

  // 检查浏览器是否支持
  if (!document.startViewTransition) {
    updatePageContent(url); // 不支持则直接更新
    return;
  }

  // 使用 View Transition
  document.startViewTransition(() => updatePageContent(url));
});

¡Solo con esto, la navegación ya tendrá un efecto de fundido cruzado predeterminado!

4. Personalizar la animación de transición

El fundido predeterminado es excelente, pero el verdadero poder de la API está en su capacidad de personalización. Cuando se ejecuta startViewTransition, el navegador crea una estructura DOM que contiene los siguientes pseudoelementos:

• ::view-transition: Elemento raíz que contiene toda la transición.
• ::view-transition-old(root): La “captura” de la vista anterior.
• ::view-transition-new(root): La “captura” de la vista nueva.

Podemos sustituir el efecto predeterminado mediante una animation de CSS; por ejemplo, para crear una animación de entrada lateral:

@keyframes slide-in {
  from { transform: translateX(100%); }
}

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

5. La “transformación” entre elementos: view-transition-name

La función más sorprendente de la API permite reconocer elementos diferentes de dos páginas como el mismo objeto y crear una animación de “transformación” fluida entre ambos.

Esto se consigue mediante la propiedad CSS view-transition-name.

Página A (lista):

<img src="thumbnail.jpg" style="view-transition-name: hero-image;" />

Página B (detalle):

<img src="full-size.jpg" style="view-transition-name: hero-image;" />

Al navegar de la página A a la página B, el navegador detecta que ambos elementos tienen el mismo view-transition-name. Entonces calcula automáticamente las diferencias de posición, tamaño y forma, y genera una transición fluida en lugar de un simple fundido. Esto funciona especialmente bien en transiciones de imágenes, tarjetas y elementos similares.

Conclusión

La View Transitions API aporta a la web la esperada capacidad nativa de crear transiciones. Simplifica enormemente efectos de interacción que antes requerían complejas bibliotecas de animación JavaScript y facilita más que nunca la creación de experiencias fluidas y cinematográficas. Con su integración en frameworks como Astro y Nuxt, y su futura adopción en aplicaciones multipágina, se convertirá sin duda en una habilidad estándar para los desarrolladores web modernos.