Saltar al contenido

View Transitions

Conecta una superficie de lista y detalle con la API nativa del navegador.

Al abrir el proyecto, su card se transforma en la vista de detalle mediante la API nativa del navegador.

Proyecto Aurora

Sitio web del equipo

Una misma superficie, dos vistas. La navegación conserva la identidad visual del proyecto.

También puedes abrir sin transición.

Configuración

Esta función pertenece al framework, no al módulo UI. Requiere soporte del navegador y respeta movimiento reducido; la navegación sigue funcionando cuando no puede animarse.

Configuración, CSS y enlace ts
// meeko.config.ts
export default defineMeekoConfig({ viewTransitions: true })

/* app/styles/main.css: el nombre, sólo durante la navegación, y un único elemento por vista */
html:active-view-transition-type(meeko-route) .project-card { view-transition-name: project; }

<!-- Enlace con navegación normal si prefieres omitir la transición -->
<MeekoLink to="/transitions/project"
  data-meeko-view-transition="false">Abrir sin transición</MeekoLink>

¿Te sirvió esta página?

Añadir un comentario

Se envía al elegir «Sí» o «No». Solo se guardan la página, tu respuesta y el comentario: ni cookies ni datos tuyos.

0 de 2000 caracteres