Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The example for transition:animate:"none" does not work as advertised #9977

Closed
martrapp opened this issue Nov 11, 2024 · 3 comments · Fixed by #10038
Closed

The example for transition:animate:"none" does not work as advertised #9977

martrapp opened this issue Nov 11, 2024 · 3 comments · Fixed by #10038
Labels
improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes)

Comments

@martrapp
Copy link
Member

martrapp commented Nov 11, 2024 •
edited
Loading

📚 Subject area/topic

View Transitions

📋 Page(s) affected (or suggested, for new content)

https://docs.astro.build/en/guides/view-transitions/#built-in-animation-directives

📋 Description of content that is out-of-date or incorrect

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>

https://discord.com/channels/830184174198718474/1305515717101359104

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

here is a Stackblitz for the example from the support thread
https://stackblitz.com/edit/withastro-astro-emfhs5?file=src%2Fpages%2Findex.astro
not been able to turn off transitions in this example is inherent to Astro's approach and can not really be repaired.

The fix in docs would be to use transition:animate="none" only in a layout, not directly on the <html> element of a layout-less .astro file. (this adds complexity to the example, but currently it is simply wrong)
@martrapp martrapp added the improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes) label Nov 11, 2024
@martrapp
Copy link
Member Author

martrapp commented Nov 11, 2024 •
edited
Loading

This is a complicated edge case: The problem exists only for the toplevel <html> element if used directly in a page (as opposed to a shared component). Typically we suggest common layout components. Then the problem does not surface.

Running the stackblitz produces two transition groups on navigation as Astro auto-generates two different scope names for the two pages:
image
The CSS rules for the astro... scopes are defined on the old page only and unknown on the new page. Therefore the browser generates a root group for the unknown scope. resulting in two groups: The astro group with disabled animations and the root group with default 250ms fade.

Using transition:animate in a component defines the same scope name on the old an new page and thus the required CSS is present on both pages. Now there is only one Astro generated group and the animations are disabled. No browser generated root group with default fade.

@sarah11918
Copy link
Member

Hey @martrapp , thank you for noticing and letting us know!

I mean, normally I'd be asking you for advice on how to proceed in this case. 😅 Would you like to make a PR with your best judgement on what to show? This could include:

  • updating the existing example to be accurate (hopefully without being extremely complicated)
  • choosing an entirely different example to demonstrate whatever concept this was intending to demonstrate (something hopefully kind of simple)
  • removing the example entirely so it's at least not wrong

I really would trust your judgement here! What do you think?

@martrapp
Copy link
Member Author

Hi @sarah11918, normally I'd just correct the docs 😅

But in this particular case I was quite unsure what would be best for docs, pondering the alternatives you named.

I'll come up with a suggestion and as usual trust that you come to the rescue ;-)

@martrapp martrapp mentioned this issue Nov 16, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
improve or update documentation Enhance / update existing documentation (e.g. add example, improve description, update for changes)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Ensure that the transition:animate="none" example is technically correct withastro/docs
2 participants
@sarah11918 @martrapp