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