# v3-transitions

> Vue3 reusable transition components

Latest version **0.2.0** (published 2022-03-29) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install v3-transitions
pnpm add v3-transitions
yarn add v3-transitions
bun add v3-transitions
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-03-29 |
| First published | 2022-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 50rayn |
| Maintainers | 50rayn |
| Keywords | transitions, animations, fade, vue |

## Links

- npm: https://www.npmjs.com/package/v3-transitions
- Repository: https://github.com/50rayn/v3-transitions
- Issues: https://github.com/50rayn/v3-transitions/issues
- npm.io page: https://npm.io/package/v3-transitions

## 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

- 0.2.0 (latest) — 2022-03-29
- 0.1.1 — 2022-03-27
- 0.1.0 — 2022-03-27

## README

# v3-transitions

[![NPM version](https://img.shields.io/npm/v/v3-transitions.svg?style=flat)](https://npmjs.com/package/v3-transitions) [![NPM downloads](https://img.shields.io/npm/dm/v3-transitions.svg?style=flat)](https://npmjs.com/package/v3-transitions)

It's a fork of [vue2-transitions](https://github.com/BinarCode/vue2-transitions), but added support of Vue3.

## Install :coffee:

```bash
npm i -S v3-transitions
```

## Local usage :rocket:

```vue
<template>
   <fade-transition>
      <div class="box" v-show="show">
        <p>Fade transition</p>
      </div>
    </fade-transition>
</template>

<script>
import 'v3-transitions/dist/style.css'
import { FadeTransition } from 'v3-transitions'

export default {
  components: {
    FadeTransition
  }
}
</script>
```

## Global usage
```js
import 'v3-transitions/dist/style.css'
import Transitions from 'v3-transitions'
import { createApp } from 'vue'

const app = createApp(App)
app.use(Transitions)
```

## List of available transitions
- FadeTransition
- ZoomCenterTransition
- ZoomXTransition
- ZoomYTransition
- SlideXLeftTransition
- SlideXRightTransition
- SlideYUpTransition
- SlideYDownTransition
- ScaleTransition
- :warning: CollapseTransition (still buggy)

## Props
```js
props: {
  /**
   * Transition duration. Number for specifying the same duration for enter/leave transitions
   * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
   */
  duration: {
    type: [Number, Object],
  default: 300
  }
  /**
   * Whether the component should be a `transition-group` component.
   */
  group: Boolean,
    /**
     * Transition tag, in case the component is a `transition-group`
     */
    tag: {
    type: String,
  default: 'span'
  },
  /**
   *  Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
   *  Can be specified with styles as well but it's shorter with this prop
   */
  origin: {
    type: String,
  default: ''
  },
  /**
   * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
   */
  styles: {
    type: Object,
  default: () => {
      return {
        animationFillMode: 'both',
        animationTimingFunction: 'ease-out'
      }
    }
  }
}
```

## Group transitions
Each transition can be used as a `transition-group` by adding the `group` prop to one of the desired transitions.
```html
<fade-transition group>
    <!--keyed children here-->
</fade-transition>
```
Gotchas/things to watch:
1. Elements inside `group` transitions should have `display: inline-block` or must be placed in a flex context:
   [Vue.js docs reference](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions)
2. Each transition has a `move` class [move class docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).
   Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a `move` class associated
   with `.3s` transition duration:

- Zoom
  ```css
   .zoom-move{
     transition: transform .3s ease-out;
   }
  ```
- Slide
  ```css
    .slide-move{
      transition: transform .3s ease-out;
    }
  ```
- Scale
  ```css
   .scale-move{
       transition: transform .3s cubic-bezier(.25,.8,.50,1);
   }
  ``` 
- Fade
  ```css
  .fade-move{
      transition: transform .3s ease-out;
  }
   ``` 
If you want to configure the duration, just redefine the class for the transition you use with the desired duration.

## License

MIT &copy; [50rayn](https://github.com/50rayn)

## Special thanks to

@cristijora (The UI for list transitions in the demo is inspired by [vue2-transitions](https://github.com/BinarCode/vue2-transitions) )

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