Noction / vue-bezier

Vue3 reusable transition components
https://noction.github.io/vue-bezier/
MIT License
19 stars 1 forks source link

@noction/vue-bezier

NPM version NPM downloads codecov

Demo

Install :coffee:

npm i -S @noction/vue-bezier

Local usage :rocket:

<template>
   <fade-transition>
      <div class="box" v-show="show">
        <p>Fade transition</p>
      </div>
    </fade-transition>
</template>

<script>
import '@noction/vue-bezier/styles'
import { FadeTransition } from '@noction/vue-bezier'

export default {
  components: {
    FadeTransition
  }
}
</script>

Global usage

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

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

List of available transitions

Props

Prop Type Default Description
duration Number, Object 300 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.
group Boolean false Whether the component should be a transition-group component.
tag String 'span' Transition tag, in case the component is a transition-group.
origin String '' Transform origin property, can be specified with styles as well but it's shorter with this prop.
styles Object { animationFillMode: 'both', animationTimingFunction: 'ease-out' } Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks.

Group transitions

Each transition can be used as a transition-group by adding the group prop to one of the desired transitions.

<fade-transition group>
   <!--keyed children here-->
</fade-transition>

Gotchas/things to watch:

  1. Elements inside group transitions should have display: inline-block or must be placed in a flex context: Vue.js docs reference
  2. Each transition has a move class move class docs. Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a move class associated with .3s transition duration:

License

MIT © 50rayn

Special thanks to

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