Transition component for Animate.css

Transition component for Animate.css

transition component for Animate.css.


functional transition components for Animate.css

Check out the project demo to see it in action.

NPM version Build Status Dependency Status Coverage percentage


Download the project using your favorite package manager:

npm install @codekraft-studio/vue-animated
yarn add @codekraft-studio/vue-animated

Load it in your project with or without options:

import Vue from 'vue'
import VueAnimated from '@codekraft-studio/vue-animated'

import Vue from 'vue'
import VueAnimated from '@codekraft-studio/vue-animated'

Vue.use(VueAnimated, {
  functional: true,
  defaultDuration: 2000

The module comes with animate.css bundled to ensure the compatibility so you don't have to load it manually.


It work like a normal transition component but allow you to specify the animation names and control the duration:

<Animated enter="slideInRight" leave="slideOutLeft" duration="500">
  <div v-if="show" class="box"></div>

You can also use all the components in the kebab-kase form:

<animated enter="bounce"></animated>

The above code will produce the same effect.

Functional animation components

To enable the functional components registration pass true to the init function options, by default are disabled.

Vue.use(VueAnimated, {
  functional: true

Than quickly add animations to your application using the global components:

  <!-- Normal transition content -->

<AnimatedSwing duration="500">
  <!-- Normal transition content -->

<AnimatedHeartBeat duration="3000" appear>
  <!-- Normal transition content -->

Please note that only the attention seekers and special animation components are available, all the components relative to animation that includes enter or leaving animations can be created with the generic component:

<Animated enter="rotateInDownRight" leave="rotateOutDownRight" duration="2000" mode="out-in" appear>
  <div class="box"></div>


If you want to contribute to the development of this project either by making features, fixing bugs or help to do a better demo page, please follow the steps below to setup the development environment.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit


This project depends to animate.css which is also licensed under MIT, this project is also released under the MIT License by codekraft-studio.

Github Repository