#[SOLVED] Transitions not working on certain pages

6 messages · Page 1 of 1 (latest)

thick roost
#

Hello! I tried using ViewTransitions on my project. It works on paths like / or /blueprints, but when i try it on paths like /auth/signin, It does not have the nice fade effect, rather it is a full-page reload. All of those pages use the same layout file, which goes as follows:

---
interface Props {
    title: string;
}

const { title } = Astro.props;

import { ViewTransitions } from 'astro:transitions';
import Header from "../components/Header.astro";
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="Gizmo website" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>

        <ViewTransitions />
    </head>
    <body>
        <Header />
        <slot />
    </body>
</html>

Also, none of my pages or links have data-astro-reload stuff

#

Okay, i seem to have found the issue - the transition does not occur when using location.href=HREF_LINK>, however works fine when using <a> element with href

#

Is there a way to make buttons redirect to a page while keeping the transition behaviour?

#

looks like using navigate from astro:transitions/client fixes this issue

royal timber
#

Hi, Engi 👋🏻 if you've fixed your issue, would you kindly update the title with [SOLVED] or [FIXED], something so we don't get to bother with it?

thick roost