Prevent animations with prefers-reduced-motion

[matthewp]

Changes

• Adds prefers-reduced-motion that eliminates the animations.
• This is a "hammer" and maybe goes further than it should. But I'd rather go to extreme measures and then pull back later.

Testing

N/A

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: 07455eb

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jazzypants1989]

The problem with this is that the fallback animations will still occur because those pseudo-elements don't exist in Firefox, etc.

This is why my solution used JavaScript in #7755 instead of Jake Archibald's suggestion-- however this will still be necessary to skip animations with the unstable meta tag version of View Transitions because that is not reliant on JavaScript.

[matthewp]

Good point. We have a data attribute for the fallback. Does this cover it then? cda8dbf

[matthewp]

I think this one is ok. The fallback will do the setTimeout wait since there are no animations, but that's ok. And I think it's still ok to call startViewTransition even if you are not doing animations.

[jazzypants1989]

[data-astro-transition-fallback] isn't working for me. The animations are still firing on Firefox, but [data-astro-transition-scope] seems to work fine as a selector. Would it ever not be placed on an animation?

[matthewp]

Oh, I think it actually needs to be:

[data-astro-transition-fallback=new] [data-astro-transition-scope] {
  animation: none !important;
}

The animations are on the actual elements in the fallback. So yeah, it can be simplified to just use [data-astro-transition-scope]. I'll update the PR.