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

transition:animate="none" still fades content #10241

Closed
1 task
metonym opened this issue Feb 27, 2024 · 3 comments
Closed
1 task

transition:animate="none" still fades content #10241

metonym opened this issue Feb 27, 2024 · 3 comments
Labels
- P2: has workaround Bug, but has workaround (priority)

Comments

@metonym
Copy link
Contributor

metonym commented Feb 27, 2024 •
edited
Loading

Astro Info

Astro                    v4.4.5
Node                     v18.18.2
System                   macOS (x64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/svelte

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I'm using View Transitions and explicitly want there to be no animations:

<ViewTransitions transition:animate="none" />

However, I can observe a subtle fade/fade out. The docs say that prefers-reduced-motion is respected (which is great). However, my expectation was that animate="none" would override this behavior, regardless of the preferred motion setting.

This behavior can be observed on the following site: https://svhe.onrender.com/

Source code for the View Transition usage: https://github.com/metonym/svelte-highlight/blob/master/www/layouts/Layout.astro#L17

Repro steps:

  1. Ensure prefers reduced motion is disabled in system settings.
  2. Visit the site.
  3. Navigate between "Languages" or "Styles"
  4. Note the fade animation.

What's the expected result?

The expected result is that explicitly setting transition:animate="none" will not entail any animation.

Link to Minimal Reproducible Example

https://github.com/metonym/svelte-highlight/blob/master/www/layouts/Layout.astro#L17

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Feb 27, 2024
@martrapp
Copy link
Member

martrapp commented Feb 27, 2024 •
edited
Loading

Hi @metonym, after a quick glance at you code:

  <ViewTransitions transition:animate="none" />

Here transition:animate="none" defines a new transition group but it does not change the overall animation behavior. It should be applied to elements in the body, but not to the <ViewTransition /> component itself. The <ViewTransitions /> component has a fallback property that can be set to none but that only controls the behavior on browsers that do not nativly support view transitions.

If you want to switch off all animations do the following:
A) remove all tranistion:animate and transition:name directives from your pages as they introduce additional animations.

This leaves a single transition group named root that the browser introduces automatically for the <html> element. This group defines three animations:

image

B) Switch these animations off by setting a single transition:animate="none" on the <html> element in your layout like this:

<html transition:animate="none">

This reduced the animations:

image

Technically, that only switched off the browser generated fade of the old and new image. There still remains the group animation that scales and moves the new <html> element into the place of the old <html> element. As this "moves" the whole page into the same position, it should not be visible at all. I'll see whether we can also get rid of those, even now, you should be able to block all visible animations.

As an alternative to setting transition:none on the <html> element, you can remove all animations of the root during view transitions by adding this to your Layout:

<style is:global>
	::view-transition-group(root),
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
</style>

You might even replace the word root with a * and silence all animations of all transition groups at once if you have more than just the root group.

@martrapp martrapp added - P2: has workaround Bug, but has workaround (priority) and removed needs triage Issue needs to be triaged labels Feb 27, 2024
@martrapp martrapp mentioned this issue Feb 27, 2024
Merged
@metonym
Copy link
Contributor Author

metonym commented Feb 27, 2024

@martrapp Perfect, thank you for the detailed explanation! Going with the workaround for now.

metonym added a commit to metonym/svelte-highlight that referenced this issue Feb 27, 2024
@metonym
chore(docs): disable view transition animation
3ccf62f 
Applies the workaround suggested in withastro/astro#10241
@martrapp
Copy link
Member

Good to hear! Ping me on this issue, if there are further questions. The PR mentioned above now also addresses the groups morph animation. Closing this issue now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P2: has workaround Bug, but has workaround (priority)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@metonym @martrapp