View Transitions API Books Demo

Qué es

View Transitions API Books Demo es un proyecto de ejemplo creado por midudev (Miguel Ángel Durán) que demuestra la View Transitions API nativa del navegador. Está construido con Astro 2.7 y Tailwind CSS, y simula un pequeño catálogo de libros donde la navegación entre la lista y el detalle se anima de forma fluida. Sirve como referencia práctica para entender cómo se aplica esta API web sin librerías de animación externas.

Para qué sirve

• Ver un ejemplo real y minimalista de la View Transitions API en funcionamiento.
• Entender cómo conseguir animaciones de tipo “shared element” entre la portada de un libro y su ficha de detalle.
• Usar el código como punto de partida o referencia para añadir transiciones suaves a tu propia web.
• Aprender a integrar estas transiciones dentro de un proyecto Astro con Tailwind.

Cuándo usarlo

Resulta útil cuando estás aprendiendo la View Transitions API y prefieres un ejemplo concreto antes que la documentación teórica. Es ideal para experimentar y hacer fork. Al estar hecho con Astro 2.7, usa la API directamente del navegador; si trabajas con Astro moderno, su integración oficial <ViewTransitions /> cubre buena parte de estos casos de forma más sencilla.

Ejemplo

La idea central de la API que demuestra el proyecto es envolver el cambio de estado o de página dentro de document.startViewTransition para que el navegador anime la diferencia entre el antes y el después:

if (document.startViewTransition) {
  document.startViewTransition(() => {
    // actualizar el DOM: navegar al detalle del libro
    updateView();
  });
} else {
  // fallback sin animación
  updateView();
}

Para clonar y arrancar la demo en local:

git clone https://github.com/midudev/view-transitions-api-books-demo
cd view-transitions-api-books-demo
pnpm install
pnpm dev

Puntos clave

• Ejemplo enfocado y sin dependencias de animación: usa solo la API nativa del navegador.
• Construido con Astro y Tailwind CSS, fácil de leer y de modificar.
• Muestra transiciones de elemento compartido (la portada que crece hacia la ficha de detalle).

Ten en cuenta

Es una demo educativa, no un producto ni una librería para producción. El último commit es de 2023 y no recibe mantenimiento activo, aunque sigue siendo válido como referencia. El repositorio no declara licencia explícita, así que revisa con el autor antes de reutilizar su código en proyectos propios. Además, la View Transitions API no está soportada en todos los navegadores, por lo que conviene contemplar un fallback como en el ejemplo.