View Transitions API: transiciones suaves sin frameworks (ni hacks en JavaScript)
¿Alguna vez has querido animar el cambio entre páginas o secciones sin recurrir a librerías como GSAP o soluciones pesadas en JavaScript?
La experiencia de usuario se resiente cuando los cambios de vista son bruscos, pero animarlos correctamente en SPAs o aplicaciones modernas es todo un desafío... hasta ahora.
Entra en escena la View Transitions API, una herramienta nativa de los navegadores que te permite crear transiciones suaves y personalizadas al cambiar el DOM, sin tener que manejarlo manualmente ni escribir toneladas de CSS complejo.
¿Qué es y por qué importa?
La View Transitions API permite capturar el “antes” y el “después” de un cambio visual en la interfaz, y animar entre esos dos estados automáticamente.
Es como decirle al navegador: "Voy a cambiar algo. Anímalo tú de forma fluida."
Esto es especialmente útil para:
Cambios de tema (oscuro/claro)
Transiciones entre rutas en SPAs
Alternar entre estados de componentes
Transiciones en apps estáticas con navegación parcial
¿La mejor parte? Es nativa
Funciona en navegadores modernos sin frameworks ni dependencias externas (Chrome, Edge y Firefox en beta). Esto significa:
Mejor rendimiento (sin JavaScript innecesario)
Menos errores en animaciones complejas
Código más limpio y fácil de mantener
Una analogía simple: el telón del teatro
Imagina que estás en una obra de teatro. Cuando quieres cambiar de escena, no haces el cambio en vivo: bajas el telón, cambias el escenario detrás, y luego lo subes.
La View Transitions API hace lo mismo: congela la vista, realiza el cambio en el DOM y luego muestra el resultado con una animación fluida.
Ejemplo práctico: cambio de tema
Antes necesitabas CSS y JavaScript personalizados para animar entre temas. Ahora, basta con:
html
<button onclick="document.startViewTransition(() => {
document.documentElement.classList.toggle('dark');
});">
Cambiar tema
</button>
Y en tu CSS:
:root {
--bg: #fff;
--text: #000;
}
.dark {
--bg: #111;
--text: #eee;
}
body {
background-color: var(--bg);
color: var(--text);
transition: none; /* La animación la hace el navegador */
}
Con esa única función startViewTransition(), el navegador captura el antes y el después del DOM y genera una animación automática entre ellos.
¿Y en SPAs con rutas?
En frameworks modernos como React, Svelte o incluso en sitios con routing del lado del cliente, puedes envolver el cambio de vista con la misma API:
js
document.startViewTransition(() => {
router.navigate('/about');
});
Y si quieres transiciones más avanzadas, como mover un elemento de una página a otra (por ejemplo, una imagen), puedes usar view-transition-name:
css
img {
view-transition-name: logo;
}
Si la imagen existe en la vista anterior y también en la nueva, el navegador la animará automáticamente entre posiciones y tamaños.
Ventajas clave
Nativo, sin dependencias
Mejora la experiencia de usuario
Fácil de implementar
Degradado elegante en navegadores antiguos
Útil tanto en sitios simples como en SPAs
Compatibilidad (julio 2025)
Chrome, Edge (v111+)
Firefox (en pruebas, habilitable con flags)
Safari: aún no disponible oficialmente
Pero puedes aplicar mejora progresiva: si no está disponible, simplemente haces el cambio sin animación:
js
if (document.startViewTransition) {
document.startViewTransition(() => updateDOM());
} else {
updateDOM();
}
¿Dónde aplicarlo hoy mismo?
Blog personal: transiciones suaves entre artículos
Portfolio: destacar proyectos sin recargar la vista
Dashboard: alternancia entre gráficos, métricas o modos
E-commerce: cambio de vistas de producto o filtros
Recursos para aprender más
MDN: View Transitions API
Artículo: Deep dive de Jake Archibald
¿Y tú qué opinas?
¿Te gustaría ver más ejemplos de uso real en React o Svelte?
¿Ya la probaste en algún proyecto? Cuéntamelo en los comentarios.
#IAenAlura #FrontEndDev #WebDevelopment
