@noction/vue-bezier

Demo

Install :coffee:

pnpm add @noction/vue-bezier

Local usage :rocket:

<script setup>
import { DissolveTransition } from '@noction/vue-bezier'
import { ref } from 'vue'
import '@noction/vue-bezier/styles'

const show = ref(true)
</script>

<template>
  <DissolveTransition :duration="400">
    <div v-if="show" class="box">
      <p>Dissolve transition</p>
    </div>
  </DissolveTransition>
</template>

Global usage

import Transitions from '@noction/vue-bezier'
import { createApp } from 'vue'
import '@noction/vue-bezier/styles'

const app = createApp(App)
app.use(Transitions)

List of available transitions

Single Element Transitions

• BlurTransition - Blur effect with opacity
• ClipPathTransition - Clip path reveal animation
• DissolveTransition - Fade in/out effect
• FadeSlideTransition - Combined fade and slide animation
• PushTransition - Push content in a direction
• RotateTransition - 3D rotation effect
• ScaleTransition - Scale up/down animation
• WipeTransition - Wipe reveal effect
• ZoomTransition - Zoom in/out animation

List Transitions (TransitionGroup)

• DissolveListTransition - Fade effect for lists
• ScaleListTransition - Scale effect for lists

Props

| Prop | Type | Default | Description | | :----------: | ------------------ | :------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | duration | Number, Object | 300 | Transition duration in milliseconds. Number for specifying the same duration for enter/leave transitions. Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave. | | delay | Number, Object | 0 | Transition delay in milliseconds. Number for specifying the same delay for enter/leave transitions. Object style {enter: 0, leave: 100} for specifying explicit delays for enter/leave. | | tag | String | 'span' | Transition tag for List transitions (TransitionGroup components). | | origin | String | '' | Transform origin property, can be specified with styles as well but it's shorter with this prop. | | styles | Object | {} | Custom CSS styles that are applied during transition. These styles are applied via CSS variables. |

Component-Specific Props

Some transitions have additional props for customization:

ClipPathTransition

| Prop | Type | Default | Description | | :----------: | :----------------------: | :--------: | --------------------------- | | clipType | 'circle' | 'square' | 'circle' | Type of clip path animation |

<ClipPathTransition clip-type="square" :duration="1000">
  <div v-if="show">Content</div>
</ClipPathTransition>

PushTransition

| Prop | Type | Default | Description | | :-----------: | :-----------------------------------------: | :-------: | ---------------------------- | | direction | 'left' | 'right' | 'up' | 'down' | 'right' | Direction of the push effect |

<PushTransition direction="down" :duration="400">
  <div v-if="show">Content</div>
</PushTransition>

ScaleTransition

| Prop | Type | Default | Description | | :--------: | :------: | :----------: | ---------------------------------------- | | origin | String | 'top left' | Transform origin for the scale animation |

<ScaleTransition origin="center" :duration="300">
  <div v-if="show">Content</div>
</ScaleTransition>

List Transitions

For animating lists of elements, use the dedicated List transition components:

<script setup>
import { DissolveListTransition } from '@noction/vue-bezier'
import { ref } from 'vue'
import '@noction/vue-bezier/styles'

const items = ref([1, 2, 3, 4, 5])
</script>

<template>
  <DissolveListTransition :duration="400" tag="div">
    <div v-for="item in items" :key="item" class="item">
      {{ item }}
    </div>
  </DissolveListTransition>
</template>

Important notes:

1. Elements inside list transitions should have display: inline-block or must be placed in a flex context: Vue.js docs reference
2. Each list transition has a move class for animating position changes. The move duration defaults to .3s or .35s and cannot be configured via props. To customize, override the CSS class:

/* Example: Custom move duration for DissolveListTransition */
.noc-dissolve-move {
  transition: transform 0.5s ease-out;
}

Customizing Transitions

All CSS classes and custom properties are prefixed with noc- to prevent naming conflicts with other libraries. You can override any transition styles by targeting the specific classes:

/* Override dissolve transition timing */
.noc-dissolve-enter-active {
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override blur transition effect */
.noc-blur-enter-from {
  opacity: 0;
  filter: blur(20px); /* Increase blur intensity */
}

/* Override scale list move animation */
.noc-scale-list-move {
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.5, 1);
}

Available CSS custom properties:

• --noc-transition-enter-duration
• --noc-transition-leave-duration
• --noc-transition-enter-delay
• --noc-transition-leave-delay
• --noc-transform-origin (ScaleTransition)

License

MIT © 50rayn

Special thanks to

@cristijora (The UI for list transitions in the demo is inspired by vue2-transitions )