Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrtnvh/vue-transition-a11y
A extended version of the Vue <transition> component, which takes 'prefers-reduced-motion' in to account.
https://github.com/mrtnvh/vue-transition-a11y
Last synced: about 1 month ago
JSON representation
A extended version of the Vue <transition> component, which takes 'prefers-reduced-motion' in to account.
- Host: GitHub
- URL: https://github.com/mrtnvh/vue-transition-a11y
- Owner: mrtnvh
- License: mit
- Archived: true
- Created: 2019-10-28T06:36:49.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2023-11-07T23:17:33.000Z (about 1 year ago)
- Last Synced: 2024-05-17T05:24:54.458Z (7 months ago)
- Language: TypeScript
- Size: 1.89 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-a11y-vue - vue-transition-a11y - A extended version of the Vue <transition> component, which takes 'prefers-reduced-motion' in to account. (Components and plugins / Courses)
README
# vue-transition-a11y
https://vanhoofmaarten.github.io/vue-transition-a11y/
Vue transition component with a11y considerations.
- [vue-transition-a11y](#vue-transition-a11y)
- [Problem](#problem)
- [Solution](#solution)
- [API](#api)
- [Props](#props)
- [Usage](#usage)
- [License](#license)
## Problem
When using the Vue `transitions` component with [CSS transitions](https://vuejs.org/v2/guide/transitions.html#CSS-Transitions) or [CSS Animations](https://vuejs.org/v2/guide/transitions.html#CSS-Animations), it's pretty easy to disable these for users who prefer this.
```html
```
Transitions
```css
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: none;
}
}
```
Animations
```css
.slide-fade-enter-active,
.slide-fade-leave-active {
animation: bounce-in 0.5s;
}
@media (prefers-reduced-motion: reduce) {
.slide-fade-enter-active,
.slide-fade-leave-active {
animation: none;
}
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
```
Globally
```css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
```
But when using [JavaScript Hooks](JavaScript-Hooks), things get a little more complicated.
```html
```
```js
// ...
methods: {
beforeEnter(el) {
// ...
},
enter(el, done) {
// ...
done()
},
afterEnter(el) {
// ...
},
enterCancelled(el) {
// ...
},
beforeLeave(el) {
// ...
},
leave(el, done) {
// ...
done()
},
afterLeave(el) {
// ...
},
leaveCancelled(el) {
// ...
}
}
```
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.
```js
const prefersReducedMotion = window.matchMedia(
'screen and (prefers-reduced-motion: reduce)',
).matches;
// 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](https://vuejs.org/v2/api/#transition).
### Props
| Prop | Default value | Description |
| ------------ | ------------- | -------------------------------------------------------------------- |
| reduceMotion | `true` | Take the `prefers-reduced-motion: reduce` media query in to account. |
### Usage
```html
```
## License
[MIT](https://github.com/vanhoofmaarten/vue-transition-a11y/blob/master/LICENSE)
Copyright (c) 2020 Maarten Van Hoof