Have x-transition respect reduced motion preference

[movntains]

Hey, Alpine team. 👋 We've been using Alpine for a long time now and we really appreciate all of the effort you've put into it!

We're always working on improving our accessibility knowledge, and that led to us recently coming across a scenario that we wanted to bring to your attention.

Respecting reduced motion preference for transitions and animations is a key part of building an accessible website, since animations can have a variety of adverse effects on users. (Here's a great article on the topic.)

It would be great if x-transition could support this OS-level preference out of the box, since it otherwise takes some hacking in order to support the reduced motion preference in cases where x-transition is used for animations.

The matchMedia() method can be used to determine if the user has a reduced motion preference. For example:

const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')

if (motionQuery.matches) {
  // Do something to turn off the transitions, e.g., force all durations to 0
}

If this could be implemented, it would be very helpful for developers who are attempting to support reduced motion preference, but much more importantly, it would be a huge win for all of the users out there who are adversely affected by animations. By respecting their reduced motion preference, we can ensure that they can use our sites safely.

Thank you for looking this over; we really appreciate it! If you need clarification on anything, please let us know and we'll be happy to provide it.

[ekwoka]

This would be good. I can probably knock it out a PR later today

[ekwoka]

#3486

[movntains]

Thank you so much for tackling this! It is very much appreciated. 🎉