vue-simple-transitions

A simple set of directives to perform transition animations in components and HTML elements.

Installation

npm install vue-simple-transitions

Usage

1. Import the package

You can import the package in two ways:

Add all directives at once.

// main.ts or main.js
import { createApp } from  'vue'
import vueSimpleTransitions from  'vue-simple-transitions'
import  'vue-simple-transitions/styles.css'

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

app.mount('#app')

Add each directives individually.

// main.ts or main.js
import { createApp } from  'vue'
import { vAnim, vAnimDelay, vAnimDuration } from  'vue-simple-transitions'
import  'vue-simple-transitions/styles.css'

const app = createApp(App)
app.directive('anim', vAnim)
app.directive('anim-delay', vAnimDelay)
app.directive('anim-duration', vAnimDuration)

app.mount('#app')

2. Enable in App.vue

Add the transitions controller to App.vue.

After that vAnimController will observe any instance of the directives in any element or component of your project.

<template>
<h1 v-anim v-anim-delay="200">
    Hello world
</h1>

<your-component
    v-anim="'slide-x-left'"
    v-anim-delay="400"
    v-anim-duration="1200"
/>
</template>

<script setup lang="ts">
import { onMounted } from  'vue'
import { vAnimController } from  'vue-simple-transitions'

onMounted(() => {
   vAnimController()
})
</script>

API

Directive	Value Type	Default	Details
v-anim	string	fade-in	Sets the base transition class to the element/component. It also sets the name of the transition that we want to trigger.
v-anim-delay	number	500	Sets the transition-delay to the element/component.
v-anim-duration	number	500	Sets the transition-duration to the element/component.

Transitions

By default vue-simple-transitions includes these transitions:

• fade-in
• fade-out
• slide-x-left
• slide-x-right
• slide-y-bottom
• slide-y-top

Custom transitions can be added in CSS under this format:

/* Base state */
.--anim.[NAME-OF-YOUR-CLASS] { ... }
/* .--anim.my-custom-transition { ... } */

/* Animated state */
.--anim.[NAME-OF-YOUR-CLASS].--animated { ... }
/* .--anim.my-custom-transition.--animated { ... } */

Examples

• Check out the example project here.
• Check the demo website here