Shareable Transitions With No CSS – vue-transitions

Install & Download:

# NPM
$ npm i @morev/vue-transitions

Description:

A collection of reusable and sharable component transitions (slide, fade, expand, scale) for Vue.js 2 & 3 applications. Based on BinarCode’s  vue2-transitions.

How to use it:

1. Import and register the component.

// global
import Vue from 'vue';
import VueTransitions from '@morev/vue-transitions';
import '@morev/vue-transitions/styles';
Vue.use(VueTransitions, {
  // options here
});

// local
import { TransitionFade } from '@morev/vue-transitions';
export default {
  components: { TransitionFade },
};
<template>
  <transition-fade>
    <div v-if="isVisible" class="box">
      Fade transition
    </div>
  </transition-fade>
</template>

2. Available props.

// Basic props.
duration: {
  validator: validateDuration,
  default: defaults.transitionDuration,
},
easing: {
  validator: validateEasing,
  default: () => defaults.transitionEasing,
},
delay: {
  validator: validateDelay,
  default: defaults.transitionDelay,
},
noOpacity: {
  type: Boolean,
  default: false,
},
appear: {
  type: Boolean,
  default: false,
},
mode: {
  type: String,
  default: undefined,
},
group: {
  type: Boolean,
  default: false,
},
tag: {
  type: String,
  default: 'span',
},
noMove: {
  type: Boolean,
  default: false,
},
moveDuration: {
  type: Number,
  default: defaults.moveDuration,
},

// expand component
axis: {
  validator: validateExpandAxis,
  default: expandAxis,
},

// scale component
xis: {
  validator: validateScaleAxis,
  default: scaleAxis,
},
origin: {
  validator: validateScaleOrigin,
  default: scaleOrigin,
},
scale: {
  validator: validateScaleValue,
  default: scaleValue,
},

// slider component
offset: {
  validator: validateSlideOffset,
  default: () => slideOffset,
},

3. Events.

• @before-enter
• @enter
• @after-enter
• @enter-cancelled
• @before-leave
• @leave
• @after-leave
• @enter-leave

Preview:

Changelog:

v3.0.2 (03/12/2024)

• Updated for Vue 3