Introducing Vue-Transify - The New And Simple Way To Animate Vue Components

I created Vue-Transify in order to remove the repetitive transition code from my CSS and my components.

What Is Vue-Transify ?

vue-transify is a collection of pre-built , customizable transition components built on top of Vue's <Transition>.

Each animation comes ready to use . all you need is one component tag.
No keyframes No extra CSS !

<Fade :duration="600" :appear="true">
  <p>Hello Vue-Transify 🎉</p>
</Fade>

And Boom !
That's it ! The animation is handled automatically with smart defaults and you can control it all via props

⚙️ Installation

1. Install the package via npm

npm install vue-transify

2.Add the css to your main.js

import { createApp } from 'vue'
import App from './App.vue'
import "vue-transify/dist/vue-transify.css";

createApp(App).mount('#app')

3.Import any animation you want in your components

<template>
  <div style="padding: 2rem">
    <button @click="show = !show">Toggle Fade</button>
    <!-- Use the component -->
    <Fade :duration="600" :appear="true">
      <p v-if="show">✨ Hello World from Fade Animation !</p>
    </Fade>
    <!-- Use these props to change the behavior of your animation -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
// Import the component
import { Fade } from "vue-transify";
const show = ref(true)
</script>

And done ! Now You have some customizable, light animations in a sec.

💡 Why I Built It ?

When I was experimenting with transitions in vue , I kept repeating my self over and over in the CSS and keyframe patterns.
So I thought if vue is providing everything why not let the library handle the boilerplate ?

How It Works

Each animation component is built on top of Vue's <Transition>Element.
Internally all components share a few CSS variables to define timing, easing and delay

:root {
  --animation-duration: 500ms;
  --animation-easing: ease;
  --animation-delay: 0ms;
}

Then in each transition class they are applied dynamically by the props you provide

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--animation-duration) var(--animation-easing)
    var(--animation-delay);
}

Props to use

Prop	Type	Default	Description
appear	Boolean	false	Run animation on mount
duration	Number	500	Duration in ms
easing	String	'ease'	Transition easing
delay	Number	0	Delay before starting

All animation components are using these set of props

Where to see all animations ?

For checking out and trying animations you can visit the website

For now you can visit my github page in order to see the animations list
Github;