View Transitions
- Antes se importaba
ViewTransitions, en la v5 se importaClientRouter - Cuando se activan los View Transitions se activa también el
prefetch, precarga los enlaces cuando se pasa sobre ellos (hover) - Se agregan en cada página, en la sección del
<head>pero si se comparte el layout o componente entonces no es necesario agregarlo más de una vez - Al hacer build agrega archivos JS en
dist/_astro/ClientRouter...anteriormente se llamabanhoisted
src\layout\MainLayout.astro
---
import { ClientRouter } from "astro:transitions"; // <====
// ...
---
<html lang="es">
<head>
<!-- ... -->
<title>{title}</title>
<ClientRouter /> <!-- <========================== -->
</head>
<body>
</body>
</html>
Nombrar las transiciones
- Primero se deben "activar" las transiciones
- El nombre debe ser único
<img
transition:name={`${name}-image`}
src={imageUrl}
alt={name}
/>
Sin JavaScript
- No genera el JS al hacer build
- Funciona solo en navegadores que ya tienen implementado las View Transitions, y en los que no lo tienen, no hace la animación
src\layouts\MainLayout.astro
---
// import { ClientRouter } from "astro:transitions";
---
<html lang="es">
<head>
<title>Home</title>
<!-- <ClientRouter /> -->
<style>
@view-transition {
navigation: auto; /* enabled! */
}
</style>
</head>
<body>
</body>
</html>
Ciclo de vida
- Cuando se agrega
<script></script> - Si se utilizan los
ViewTransitionsel JS solo se ejecuta una vez aunque se navegue entre páginas. - Se ejecuta otra vez si se hace reload.
- Para evitar eso, se envuelve el script o función en un evento especial de los
ViewTransitions - No es necesario envolver el JS en un listener si no se utilizan las ViewTransition
Eventos especiales del ViewTransition
| Evento | Descripción |
|---|---|
astro:after-preparation | |
astro:after-swap | Después de hacer la preparación, antes del load |
astro:before-preparation | Antes de iniciar el cambio, cuando el usuario hace clic |
astro:before-swap | Antes de hacer el cambio |
astro:page-load | Cuando se ha navegado a la nueva pantalla, se ejecuta dos veces |