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:
v2.3.6 (01/17/2023)
- 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