La API de View Transition te brinda el poder de crear transiciones visuales fluidas entre diferentes vistas de tu sitio web. Esto crea una experiencia del usuario visualmente más atractiva para los usuarios mientras navegan por tu sitio, independientemente de si se creó como una aplicación de varias páginas (MPA) o como una aplicación de una sola página (SPA).
Entre las situaciones típicas en las que usarías transiciones de vistas, se incluyen las siguientes:
- Una imagen en miniatura en la página de una ficha de producto que pasa a una imagen de tamaño completo del producto en la página de detalles del producto.
- Es 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 desde las posiciones a medida que filtras.
Cómo implementar transiciones de vistas
Las transiciones de vistas no están vinculadas a una arquitectura de aplicación o framework específico y pueden activarse no solo en un documento, sino también entre dos documentos diferentes.
Ambos tipos de transición de vistas se basan en los mismos principios y componentes básicos:
- 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 en que se activan.
Transiciones de vista del mismo documento
Cuando una transición de vista se ejecuta en un solo documento, se denomina transición de vista del mismo documento. Este suele ser el caso en las aplicaciones de una sola página (SPA). Las transiciones de vista del mismo documento son compatibles con Chrome a partir de la versión 111 de Chrome.
Cómo activar
Llama a document.startViewTransition para activar las transiciones de una vista del 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 usa transiciones de vista del mismo documento para animar las tarjetas a medida que se agregan o quitan tarjetas nuevas.
Comienza con la compilación
Consulta la página de documentación dedicada para conocer todo lo que hay que saber sobre las transiciones de vistas del mismo documento.
Cómo compilar transiciones de vistas del mismo documento
Transiciones de vista entre documentos
Cuando se produce una transición de vistas entre dos documentos diferentes, se denomina transición de vista en varios documentos. Esto es normal en las MPA. Las transiciones de vista entre documentos son compatibles con Chrome 126 y versiones posteriores.
Cómo activar
Si se habilitan ambas páginas, las transiciones de vista entre documentos se activan mediante la 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.
Mejor habilitación, usa el siguiente fragmento de CSS:
@view-transition {
navigation: auto;
}
Ejemplo
El siguiente ejemplo de Stack Navigator es una MPA que usa transiciones de vista de varios documentos entre dos documentos diferentes. Dependiendo de si profundizas en la navegación o no, las páginas se insertan en la pila o se quitan.
Comienza con la compilación
Descubre todo lo que hay que saber sobre las transiciones de vistas entre documentos.