# Getting started

# Installation

Download the project using your favorite package manager:

npm install @codekraft-studio/vue-animated

Than load the plugin into Vue to register its global components.

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

Vue.use(VueAnimated)

The plugin can also accept options to customize the default animation behavior and to choose which animation transitions should be created and globally registered.

# Customization

When adding the plugin to the Vue instance you can pass it default properties and customize what is loaded.

# defaultDuration

An integer that represents the default animation duration when not specified as property.

Vue.use(VueAnimated, {
  defaultDuration: 750
})

# functional

A boolean to indicate if built-in functional components of the common animations (such as attention seekers and special animation) should be loaded or not, by default they are not loaded.

Vue.use(VueAnimated, {
  functional: true
})

You can also pass an array of existing animation names to register only the transition components you need.

Vue.use(VueAnimated, {
  functional: ['shake', 'pulse']
})

<AnimatedShake></AnimatedShake>
<AnimatedPulse></AnimatedPulse>

# Usage

# Generic component

The plugin expose an extended functional component called Animated that is designed to work with animate.css classes out of the box. It works like a normal transition component but allow you to specify the animation enter and leave names directly from properties.

<Animated enter="slideInRight" leave="slideOutLeft">
  <!-- ... -->
</Animated>

The example above will use slideInRight animation while entering and slideOutLeft animation while leaving, all the others transition component properties such as duration and hooks can be used normally.

When using enter and leave properties you should specify the name of an existing animate.css class as shown in their documentation.

You can also use the same animation for both enter and leave states using the name property as you would do in a normal transition element.

<Animated name="pulse" duration="1000" appear>
  <!-- ... -->
</Animated>

The Animated base component for generic transitions and the built-in functional components based on existing classes can be used also in kebab-case, the following example show codes that will produce the same result.

<animated name="bounce"></animated>

<animated-bounce></animated-bounce>

<AnimatedBounce></AnimatedBounce>

# Named components

When registering the plugin to your Vue application you can enable the generated built-in animation components registration.

Vue.use(VueAnimated, {
  functional: true
})

This will register globally a set of pre-defined transitions based on the attention seekers and special animation groups of animate.css.

<AnimatedBounce></AnimatedBounce>
<AnimatedFlip></AnimatedFlip>
<AnimatedPulse></AnimatedPulse>

# Custom component

The plugin provides also a generic component class to let you create any functional component based on the animate.css animations class names. This allow you to customize what is registered as component and loaded in your application. Also is useful if you want to add any custom animation to animate.css and have it as functional component.

import Vue from 'vue'
import {AnimatedGeneric} from '@codekraft-studio/vue-animated'

Vue.component("HingeAnimation", new AnimatedGeneric("hinge", {
  defaultDuration: {
    enter: 0,
    leave: 2500
  }
}))

Now you will be able to use HingeAnimation component everywhere in your app.

<HingeAnimation>
  <!-- ... -->
</HingeAnimation>