fix(nuxt): disable View Transitions when prefers-reduced-motion: reduce

[lukewarlow]

🔗 Linked issue

#22291

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

View transitions now early return when the prefers-reduced-motion user preference is reduce. This improves the out of the box accessibility of the feature.

Resolves #22291

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[DamianGlowala]

This might help:

https://developer.chrome.com/docs/web-platform/view-transitions/#reacting-to-the-reduced-motion-preference

However, a preference for 'reduced motion' doesn't mean the user wants no motion. Instead of the above, you could choose a more subtle animation, but one that still expresses the relationship between elements, and the flow of data.

[lukewarlow]

This might help:

https://developer.chrome.com/docs/web-platform/view-transitions/#reacting-to-the-reduced-motion-preference

However, a preference for 'reduced motion' doesn't mean the user wants no motion. Instead of the above, you could choose a more subtle animation, but one that still expresses the relationship between elements, and the flow of data.

Ah thanks god knows how I missed that when I read through that post. I was missing the -group pseudo. That appears to be working now.

I still feel it's valuable to have an option to skip the transition (it skips the steps of generating the old and new images of DOM) but I get if you would rather this not be the default. I'm not familar with the plugin API does nuxtApp expose an options object?

[lukewarlow]

withastro/astro#7757 fwiw astro appear to have gone the route of disabling view transitions by default (they used CSS instead)

Thanks @rschristian for pointing me to this

[lukewarlow]

Apologies it's taken so long to get back to this. Hopefully the latest commit is correct

[lukewarlow]

Just double checking is this waiting on me for anything? No worries if it just needs time or other reviews, wanna make sure i'm not the blocker though.

[danielroe]

Nope! It's good to go, and I plan to merge it in time for the next minor release.