Transition component for Animate.css

Transition component for Animate.css

transition component for Animate.css.

vue-animated

functional transition components for Animate.css

Check out the project demo to see it in action.

NPM version Build Status Dependency Status Coverage percentage

Installation

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'

Vue.use(VueAnimated)
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.

Usage

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>
</Animated>

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

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

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:

<AnimatedBounce>
  <!-- Normal transition content -->
</AnimatedBounce>

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

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

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>
</Animated>

Development

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

License

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