@litt1e-p/transitions

transitions

the animation kits for vue components transition

vue 3.x supports

Installation

npm i @litt1e-p/transitions

Usage

1. global registration

// in main.js
import Transitions from '@litt1e-p/transitions'
import '@litt1e-p/transitions/dist/transitions.css'

Vue.use(Transitions)

2. or use as vue component

// in your vue file
import { transitions } from '@litt1e-p/transitions'

export default {
  components: {
    transitions
  }
  ...
}

3. use in template

eg. use zoom transition effect

<transitions type="zoom">
  <component :is="your componet"></component>
</transitions>

if your does not provide any type, it will apply random effect instead

Configuration

all types of effect

• collapseHorizonal

• collapseVertical

• slideBottom

• slideTop

• slideLeading

• slideTrailing

• fade

• zoom

transition mode customization which default value is out-in

more options