vue-transition-a11y
https://vanhoofmaarten.github.io/vue-transition-a11y/
Vue transition component with a11y considerations.
Problem
When using the Vue transitions
component with CSS transitions or CSS Animations, it's pretty easy to disable these for users who prefer this.
<!-- ... -->
Transitions
{}
Animations
{} @ 50% 100% }
Globally
{}
But when using JavaScript Hooks, things get a little more complicated.
<!-- ... -->
// ...methods: { // ... } { // ... } { // ... } { // ... } { // ... } { // ... } { // ... } { // ... }
Where in all of these functions are you going to disable your complex animations?
Using the window.matchMedia
functionality, you could check if the user's preferences.
const prefersReducedMotion = windowmatches; // Stop every animation method if prefersReducedMotion === false
A bit over the top, don't you think?
Solution
To tackle this problem and enable Vue developers to make complex, re-usable and accessible transitions and animations with the transition component, I've created this component.
What is does is very simple. If the user prefers reduced motion, don't render the transition component. If not, render it.
This way, JavaScript Hooks aren't called when unnecessary
Easy.
API
The vue-transition-a11y
components API extends the standard Vue transition
API.
Props
Prop | Default value | Description |
---|---|---|
reduceMotion | true |
Take the prefers-reduced-motion: reduce media query in to account. |
Usage
<!-- ... -->
License
Copyright (c) 2020 Maarten Van Hoof