@litt1e-p/transitions

animation kits for vue components transition

Usage no npm install needed!

<script type="module">
  import litt1ePTransitions from 'https://cdn.skypack.dev/@litt1e-p/transitions';
</script>

README

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)
  1. or use as vue component
// in your vue file
import { transitions } from '@litt1e-p/transitions'

export default {
  components: {
    transitions
  }
  ...
}
  1. 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