Add it to the body
<body hx-ext="hx-astro-view-transition">An example
<form
hx-post="/api/signIn"
hx-view-transition="/"
hx-swap="none"
>Note: if you are using SSR
You might want to add the following in the layout.astro:
Astro.response.headers.set(
"Cache-Control",
"no-cache, no-store, must-revalidate",
);
Astro.response.headers.set("Pragma", "no-cache");
Astro.response.headers.set("Expires", "0");| htmx.defineExtension("hx-astro-view-transition", { | |
| onEvent: function (name, evt: any) { | |
| if (name === "htmx:afterRequest") { | |
| const attributes = evt.target.attributes; | |
| const viewTransitionTarget = | |
| attributes["hx-view-transition"]?.value; | |
| if (!viewTransitionTarget) { | |
| console.log(evt); | |
| return; | |
| } | |
| const a = document.createElement("a"); | |
| a.href = viewTransitionTarget; | |
| console.count(viewTransitionTarget); | |
| document.body.appendChild(a); | |
| a.dispatchEvent( | |
| new PointerEvent("mouseenter", { | |
| bubbles: true, | |
| cancelable: true, | |
| }), | |
| ); | |
| a.dispatchEvent( | |
| new PointerEvent("click", { | |
| bubbles: true, | |
| cancelable: true, | |
| }), | |
| ); | |
| } | |
| }, | |
| }); | |
| // Runs on view transitions navigation + process the new HTML | |
| document.addEventListener("astro:after-swap", () => | |
| htmx.process(document), | |
| ); |