radical-dreamers / animated-vue

A plugin to use animate.css animations as Vue2 transitions
MIT License
220 stars 19 forks source link

animated-vue

A plugin to use animate.css animations as Vue2 transitions

Demo: Coming soon!

Installation and usage

Install animated-vue and animate.css from npm

npm install --save animated-vue animate.css

Import Vue and Animated Vue in your code, and register the plugin:

import Vue from 'vue'
import AnimatedVue from 'animated-vue'
import 'animate.css/animate.css'

Vue.use(AnimatedVue)

Using it without any build tool

If you want to use the library directly from your html pages, you should download the compiled version of animated-vue found in the dist folder and do something like this in your page:

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://github.com/radical-dreamers/animated-vue/blob/master/[path_to_animated-vue.js]">
<script src="https://github.com/radical-dreamers/animated-vue/raw/master/path-to-vue.js"></script>

<script>
Vue.use(AnimatedVue);
// TODO: Add your app's init script.
</script>
</head>

How to use

Animated Vue offers a series of functional components for Vue, enabling you to use animate.css animations just as any other Vue component. This reduces the amount of coding you need and makes your templates easier to read and reason about.

All built-in transitions are created to make sense with the original animation's purpose. So, a bounceIn animation is set to play when a component appears while a fadeOut animation is set to play, obviously, when a component dissappears from the screen.

Single component animations

Built-in animations are easy to use and fast to remember. For example, if you want to give some part of your vue template a jello effect, you simply do:

<template>
  <!-- Here goes some part of your template -->
    <animated-jello>
      <div class="something-i-need-to-animate">
        <!-- Even more stuff here -->
      </div>
    </animated-jello>
  <!-- Here goes the rest of your template-->
</template>

List animations

Animated Vue leverages Vue's transition-group component to offer you the very same transitions for a group of elements related to a v-for directive. As you might have guessed, usage has also been simplified, but we also see the introduction of a new attribute called "tag" (Learn More).

<template>
  <!-- Here goes some part of your template -->
    <animated-group-jello tag="p">
      <span v-for="element in list" class="something-i-need-to-animate">
        <!-- Even more stuff here -->
      </span>
    </animated-group-jello>
  <!-- Here goes the rest of your template-->
</template>

The above template will render a "p" tag wrapping your list of rendered elements as the base to play the animation on.

What's included

animated-vue offers functional components for all of Animate.css animations, as well as a simple framework for defining new ones. All components follow the same naming convention:

<animated-(group-)?(kebap-cased-animatecss-animation-name)

Built in single component animations

Here's a list of built-in animation components for single component rendering.

Attention seekers

Bouncing entrances

Bouncing exits

Fading entrances

Fading exits

Flippers

Light speed

Rotating entrances

Rotating exits

Sliding entrances

Sliding exits

Zoom entrances

Zoom exits

Specials

Built-in group component animations

Here's a list of built-in animation components for single component rendering.

Attention seekers

Bouncing entrances

Bouncing exits

Fading entrances

Fading exits

Flippers

Light speed

Rotating entrances

Rotating exits

Sliding entrances

Sliding exits

Zoom entrances

Zoom exits

Specials

Custom animation definition

Animated Vue is not bundled, thus you may use whatever public artifact defined in it. One of the most useful tools you will find is the GenericTransition class. By creating new instances of it, and with the right parameters, you may define your own custom animations based on animate.css

For example, let's assume you want to apply a fadeIn animation when an element appears and a bounceOut one when it dissappears, and assuming it's a transition including a single component:

/**
 * custom-fade-in-bounce-out.js
 */
import GenericTransition from 'animated-vue/src/common/generic-transition'

/**
 * The first parameter is the animation's name, the second is the "enter" animation,
 * the third one is the "leave" animation, while the last parameter marks if the transition
 * is a group transition or not (**false** for "single" and **true** for "group")
 * @type {Object}
 */
export default new GenericTransition('custom-fade-in-bounce-out', 'fadeIn', 'bounceOut', false)

Then, in your component you can simply do:

/**
 * some-component.vue
 */
<template>
  <div>
    <button type="button" @click="toggleContent">Toggle Content</button>
    <custom-fade-in-bounce-out>
      <div v-show="showContent">
        <h1>See my awesome animation</h1>
      </div>
    </custom-fade-in-bounce-out>

  </div>

</template>
<script>
  import CustomFadeInBounceOut from './custom-fade-in-bounce-out.js'

  export default {
    data () {
      return {
        showContent: false
      }
    },
    components: {
      'custom-fade-in-bounce-out': CustomFadeInBounceOut
    },
    methods: {
      toggleContent: {
        this.showContent = !this.showContent
      }
    }
  }
</script>

Similarly, you can simply define a list transition using some animate.css animations by changing the last parameter of the GenericTransition constructor to true. In this case, you can also use the "tag" prop when using the component, so you can decide which tag is used when rendering the element's animation.

/**
 * custom-group-fade-in-bounce-out.js
 */
import GenericTransition from 'animated-vue/src/common/generic-transition'

/**
 * This is a group animation you can fill with a v-for block in your template
 * @type {Object}
 */
export default new GenericTransition('custom-fade-in-bounce-out', 'fadeIn', 'bounceIn', true)

License

MIT