# vue-transition-a11y

> Vue transition component with a11y considerations

Latest version **1.0.1** (published 2020-04-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vue-transition-a11y
pnpm add vue-transition-a11y
yarn add vue-transition-a11y
bun add vue-transition-a11y
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-04-21 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 23.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | mrtnvh |
| Keywords | vue, typescript, animation, transition, a11y, accessibility, prefers-reduce-motion |

## Links

- npm: https://www.npmjs.com/package/vue-transition-a11y
- Repository: https://github.com/vanhoofmaarten/vue-transition-a11y
- Homepage: https://github.com/vanhoofmaarten/vue-transition-a11y#readme
- Issues: https://github.com/vanhoofmaarten/vue-transition-a11y/issues
- npm.io page: https://npm.io/package/vue-transition-a11y

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-04-21
- 1.0.0 — 2020-02-15
- 1.0.0-beta.2 — 2019-12-16
- 1.0.0-beta — 2019-12-16
- 0.0.1-security — 2019-12-09

## 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
<transition name="slide-fade">
  <!-- ... -->
</transition>
```

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
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
```

```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
<div class="outer">
  <transition-a11y>
    <div class="inner">
      <!-- ... -->
    </div>
  </transition-a11y>
</div>
```

## License

[MIT](https://github.com/vanhoofmaarten/vue-transition-a11y/blob/master/LICENSE)

Copyright (c) 2020 Maarten Van Hoof

---
_Source: https://npm.io/package/vue-transition-a11y · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._