#[SOLVED] Not sure if I understood View Transitions correctly

15 messages · Page 1 of 1 (latest)

strong crag
#

I used the recommended default template when setting up Astro and followed the documentation about View Transitions but there weren't clear points made when using a custom Layout component. I'm choosing the following method in order to avoid repetition

Layout.astro

<!doctype html>
<html transition:animate="none">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <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>
    <CommonHead />
    <ViewTransitions />
  </head>
  <body>
    <slot />

....

pages/index.astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Welcome to Astro.">
  <main transition:animate="slide">
    <p>This is Index page</p>
  </main>
</Layout>

pages/test.astro

---
import Layout from "../layouts/Layout.astro";
---

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Test">
  <main transition:animate="slide">
    <p>This is a test page.</p>
  </main>
</Layout>

With this, transitions do not work at all. Neither, when I tried to wrap the <slot/>

Is there a way to even do it this way or what i'm I doing wrong?

View transitions do work when I don't mark the layout html tag with transition:animate="none" but all I'm able to use in that case is fade effect.

Repo: https://github.com/juhm-s/view-transition-test

GitHub
GitHub - juhm-s/view-transition-test

Contribute to juhm-s/view-transition-test development by creating an account on GitHub.

thick orchid
#

Your example seems to be fine - the main content slides in/out as you navigate between the index and test pages. What effect are you expecting?

strong crag
#

It doesnt slide when I'm trying it. I don't see any sort of effect 👀 I mainly use Brave, might be about it. But I've had this problem since first View Transitions official release and I've tried similar but a bit different approach with Chrome but none have worked to this day

#

I struggled with VT for weeks until I 100% gave up trying. I now primarily use Swup (and some gsap) and the "view transitions" are amazing.

Either VT is not properly implemented in Astro (I'm no expert) or the browsers just don't know how to handle it yet.

Or those of us who complain are just too dumb to get it... where I felt personally offended was when I literally replicated everything from @upbeat gyro bag of tricks and just got very shitty results...at that point I was done blaming myself. For now, Swup ftw
https://swup.js.org/

#

It might also be a problem of both Astro's and MDN's documentation of VT. I guess everyone comes to it expecting "magic", plug it in and voila plays as desired...then surprise surprise... but then when you look into the code of others who've gotten it to work, for some it's hardly simple, there's more to it.

The messaging of vt of "taking screenshots" of page and repositioning things when they come back makes me feel the developer should do almost no work getting it to work...like just viewTransition: true somewhere and let the browser do the rest... then if you want to customize things your way, then yes show ways to do so

solid cosmos
latent dune
#

(maybe a comment in the console in dev when VT are disabled by your browser settings would help)

upbeat gyro
#

@latent dune what a catch! That might well be it. In any case, I'll add that console output right away...

strong crag
strong crag
#

So to document the fix, enabling that Animation effects on Windows Settings -> Accessability fixed it. Might be good addition to add as a sidenote to View Transition documentation 🧐

Untitled.png
upbeat gyro
#

Glad to hear your problem is solved! The PR is on its way 😉

solid cosmos