Reusable Transition Components Library – vue-bezier

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;

Preview:

reusable-transition-bezier

Changelog:

v1.11.2 (02/10/2024)

  • Update

v1.10.0 (01/09/2024)

  • fix: adjust type generation script

Download Details:

Author: Noction

Live Demo: https://noction.github.io/vue-bezier/

Download Link: https://codeload.github.com/Noction/vue-bezier/zip/refs/heads/master

Official Website: https://github.com/Noction/vue-bezier

Install & Download:

# NPM
$ npm install @noction/vue-bezier

Add Comment