Shareable Transitions With No CSS – vue-transitions

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:

Shareable Transitions With No CSS

Changelog:

v2.3.3 (11/24/2022)

  • Bug fixes

Download Details:

Author: MorevM

Live Demo: https://morevm.github.io/vue-transitions/

Download Link: https://github.com/MorevM/vue-transitions/archive/refs/heads/master.zip

Official Website: https://github.com/MorevM/vue-transitions

Install & Download:

# NPM
$ npm i @morev/vue-transitions

Add Comment