#cannot disable view transition animations

10 messages · Page 1 of 1 (latest)

languid trench
#

Let's say I've got these two documents:

---
// docs/doc1
import { ViewTransitions } from 'astro:transitions'
---

<html transition:animate="none">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/docs/doc1">Doc 1</a></li>
        <li><a href="/docs/doc2">Doc 2</a></li>
      </ul>
    </nav>

    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate
      deserunt pariatur nesciunt quasi, aliquid minus architecto unde ducimus
      labore, beatae aspernatur accusamus? Alias quod iure, amet unde doloremque
      id quaerat?
    </p>

    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
      tempora unde officiis aut perspiciatis vero, est labore quae repellat
      neque quos atque dolorum cumque excepturi odio nobis ratione! Ipsam, vero?
    </p>
  </body>
</html>


---
// docs/doc2
import { ViewTransitions } from 'astro:transitions'
---

<html transition:animate="none">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/docs/doc1">Doc 1</a></li>
        <li><a href="/docs/doc2">Doc 2</a></li>
      </ul>
    </nav>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque qui modi
      doloribus quidem est totam voluptatum nam exercitationem vero expedita,
      fuga fugit, rerum dolores a nulla corrupti eius hic magnam.
    </p>
  </body>
</html>

When I switch between them using the links, for some reason I can't disable the fade animation. Weirdly from doc2 -> doc1 the view transition is disabled, but not from doc1 to doc2. Any ideas why?

jovial ermine
#

I think I might be confused here but if you don't want the view transitions just dont add them?

languid trench
#

Yeah, I know it is a weird request. The underlying issue is that I want a clientside router, so that page navigations look instant.

I went ahead and settled for htmx to do the swapping instead, it looks like the better option. Still, I believe the above is a bug isn't it?

jovial ermine
acoustic heath
#

Hey @languid trench 👋, thanks a lot for catching that! It’s definitely incorrect in the docs. transition:animate will only work on the root element if it’s used within a component that’s shared across all pages.

The simplest solution is to use a common layout, here is the most minimal version:

---
// Layout.astro
---
<html transition:animate="none">
  <slot />
</html>

and use it like this:

---
// docs/doc2
import Layout from "../../components/Lyout.astro"
import { ViewTransitions } from 'astro:transitions'
---

<Layout>
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/docs/doc1">Doc 1</a></li>
        <li><a href="/docs/doc2">Doc 2</a></li>
      </ul>
    </nav>

    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque qui modi
      doloribus quidem est totam voluptatum nam exercitationem vero expedita,
      fuga fugit, rerum dolores a nulla corrupti eius hic magnam.
    </p>
  </body>
</Layout>
#

I'll open an issue for the docs.

jovial ermine
#

Thank you VT Jedi! You’ve us yet again 😄

acoustic heath
#

Thank you, Master @jovial ermine! May the VT Force be with you! 🙏😄

acoustic heath
languid trench
#

Hey @acoustic heath , thanks for dealing with the issue! I wanted to revisit this example, as I don't really like adding a dependency like htmx just for client side navigation, felt a bit off.
Works great! Now no dependency needed!