La API de transición de vistas te permite crear transiciones visuales fluidas entre las diferentes vistas de tu sitio web. Esto crea una experiencia del usuario más atractiva visualmente para los usuarios a medida que navegan por tu sitio, independientemente de si se creó como una aplicación de varias páginas (MPA) o una aplicación de una sola página (SPA).
Entre las situaciones típicas en las que usarías transiciones de vista, se incluyen las siguientes:
- Una imagen en miniatura en una página de fichas de productos que se convierte en una imagen de tamaño completo del producto en la página de detalles del producto.
- Una barra de navegación fija que permanece en su lugar mientras navegas de una página a otra.
- Una cuadrícula con elementos que se mueven de posiciones a medida que filtras contenido
Cómo implementar transiciones de vistas
Las transiciones de vistas no están vinculadas a una arquitectura o framework de aplicación específico y se pueden activar no solo en un documento único, sino también entre dos documentos diferentes.
Ambos tipos de transición de vistas se basan en los mismos componentes y principios:
- El navegador toma instantáneas del estado anterior y del nuevo.
- El DOM se actualiza mientras se suprime la renderización.
- Las transiciones funcionan con animaciones de CSS.
Lo único que difiere entre ambos tipos es la forma de activarlos.
Transiciones de la vista del mismo documento
Cuando una transición de vista se ejecuta en un solo documento, esta acción se denomina transición de vista en el mismo documento. Por lo general, este es el caso de las aplicaciones de una sola página (SPA). A partir de la versión 111 de Chrome, se admiten las transiciones de vista del mismo documento.
Cómo activar
Llama a document.startViewTransition para activar una transición de vista al mismo documento:
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Ejemplo
El siguiente ejemplo de tarjetas es una SPA que utiliza transiciones de vista del mismo documento para animar las tarjetas a medida que se agregan o quitan nuevas tarjetas.
Comenzar a compilar
Consulta la página de documentación dedicada para conocer todo lo que hay que saber sobre las transiciones de vistas en un mismo documento.
Crea transiciones de vista del mismo documento
Transiciones de vista entre documentos
Cuando se produce una transición de vista entre dos documentos diferentes, se la denomina transición de vista entre documentos. Este es un comportamiento típico de las MPA. Las transiciones de vistas entre documentos son compatibles con Chrome 126 y versiones posteriores.
Cómo activar
Si ambas páginas están habilitadas, las transiciones de vistas entre documentos se activan mediante una navegación entre documentos del mismo origen. En otras palabras, no hay una API a la que llamar para iniciar una transición de vista entre documentos. Cuando un usuario hace clic en un vínculo, el clic activa la transición de vista.
Para habilitar la opción principal, usa el siguiente fragmento de CSS:
@view-transition {
navigation: auto;
}
Ejemplo
El siguiente ejemplo de Stack Navigator es una MPA que usa transiciones de vistas entre documentos entre dos documentos diferentes. Dependiendo de si estás explorando más la navegación o no, las páginas se insertan en la pila o se quitan.
Comenzar a compilar
Obtén toda la información necesaria sobre las transiciones de vistas entre documentos.