Reusable Transition Components Library - vue-bezier

Install & Download:

# NPM
$ npm install @noction/vue-bezier

Description:

The vue-bezier provides a set of components to apply customizable transitions to one or multiple UI components.

Transitions Included:

FadeTransition
ZoomCenterTransition
ZoomXTransition
ZoomYTransition
SlideXLeftTransition
SlideXRightTransition
SlideYUpTransition
SlideYDownTransition
ScaleTransition
CollapseTransition

How to use it:

1. Install and import transitions from the package.

// Local
import '@noction/vue-bezier/styles'
import { FadeTransition, ScaleTransition } from '@noction/vue-bezier'
export default {
  components: {
    FadeTransition,
    ScaleTransition
  }
}

// Global
import '@noction/vue-bezier/styles'
import Transitions from '@noction/vue-bezier'
import { createApp } from 'vue'
const app = createApp(App)
app.use(Transitions)

2. Add the transition component to the template.

<template>
  <fade-transition>
    ...
  </fade-transition>
</template>

3. Available props to config the transitions.

/**
 * Transition delay. Number for specifying the same delay for enter/leave transitions
 * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
 */
delay?: NumberOrTimings;
/**
 * 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?: NumberOrTimings;
/**
 * Whether the component should be a `transition-group` component.
 */
group?: boolean;
/**
 * 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?: string;
/**
 * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
 */
styles?: Styles;
/**
 * Transition tag, in case the component is a `transition-group`
 */
tag?: string;