A plugin to use animate.css animations as Vue2 transitions
Demo: Coming soon!
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)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="[path_to_animated-vue.js]">
<script src="path-to-vue.js"></script>
<script>
Vue.use(AnimatedVue);
// TODO: Add your app's init script.
</script>
</head>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.
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>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.
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)
Here's a list of built-in animation components for single component rendering.
- animated-bounce
- animated-flash
- animated-jello
- animated-pulse
- animated-rubber-band
- animated-shake
- animated-swing
- animated-tada
- animated-wobble
- animated-bounce-in
- animated-bounce-in-left
- animated-bounce-in-right
- animated-bounce-in-up
- animated-bounce-in-up
- animated-bounce-out
- animated-bounce-out-down
- animated-bounce-out-left
- animated-bounce-out-right
- animated-bounce-out-up
- animated-fade-in
- animated-fade-in-down
- animated-fade-in-down-big
- animated-fade-in-left
- animated-fade-in-left-big
- animated-fade-in-right
- animated-fade-in-right-big
- animated-fade-in-up
- animated-fade-in-up-big
- animated-fade-out
- animated-fade-out-down
- animated-fade-out-down-big
- animated-fade-out-left
- animated-fade-out-left-big
- animated-fade-out-right
- animated-fade-out-right-big
- animated-fade-out-up
- animated-fade-out-up-big
- animated-flip
- animated-flip-in-x
- animated-flip-in-y
- animated-flip-out-x
- animated-flip-out-y
- animated-light-speed-in
- animated-light-speed-out
- animated-rotate-in
- animated-rotate-in-down-left
- animated-rotate-in-down-right
- animated-rotate-in-up-left
- animated-rotate-in-up-right
- animated-rotate-out
- animated-rotate-out-down-left
- animated-rotate-out-down-right
- animated-rotate-out-up-left
- animated-rotate-out-up-right
- animated-slide-in-down
- animated-slide-in-left
- animated-slide-in-right
- animated-slide-in-up
- animated-slide-out-down
- animated-slide-out-left
- animated-slide-out-right
- animated-slide-out-up
- animated-zoom-in
- animated-zoom-in-down
- animated-zoom-in-left
- animated-zoom-in-right
- animated-zoom-in-up
- animated-zoom-out
- animated-zoom-out-down
- animated-zoom-out-left
- animated-zoom-out-right
- animated-zoom-out-up
- animated-hinge
- animated-roll-in
- animated-roll-out
- animated-roll-in-out
Here's a list of built-in animation components for single component rendering.
- animated-group-bounce
- animated-group-flash
- animated-group-jello
- animated-group-pulse
- animated-group-rubber-band
- animated-group-shake
- animated-group-swing
- animated-group-tada
- animated-group-wobble
- animated-group-bounce-in
- animated-group-bounce-in-left
- animated-group-bounce-in-right
- animated-group-bounce-in-up
- animated-group-bounce-in-up
- animated-group-bounce-out
- animated-group-bounce-out-down
- animated-group-bounce-out-left
- animated-group-bounce-out-right
- animated-group-bounce-out-up
- animated-group-fade-in
- animated-group-fade-in-down
- animated-group-fade-in-down-big
- animated-group-fade-in-left
- animated-group-fade-in-left-big
- animated-group-fade-in-right
- animated-group-fade-in-right-big
- animated-group-fade-in-up
- animated-group-fade-in-up-big
- animated-group-fade-out
- animated-group-fade-out-down
- animated-group-fade-out-down-big
- animated-group-fade-out-left
- animated-group-fade-out-left-big
- animated-group-fade-out-right
- animated-group-fade-out-right-big
- animated-group-fade-out-up
- animated-group-fade-out-up-big
- animated-group-flip
- animated-group-flip-in-x
- animated-group-flip-in-y
- animated-group-flip-out-x
- animated-group-flip-out-y
- animated-group-light-speed-in
- animated-group-light-speed-out
- animated-group-rotate-in
- animated-group-rotate-in-down-left
- animated-group-rotate-in-down-right
- animated-group-rotate-in-up-left
- animated-group-rotate-in-up-right
- animated-group-rotate-out
- animated-group-rotate-out-down-left
- animated-group-rotate-out-down-right
- animated-group-rotate-out-up-left
- animated-group-rotate-out-up-right
- animated-group-slide-in-down
- animated-group-slide-in-left
- animated-group-slide-in-right
- animated-group-slide-in-up
- animated-group-slide-out-down
- animated-group-slide-out-left
- animated-group-slide-out-right
- animated-group-slide-out-up
- animated-group-zoom-in
- animated-group-zoom-in-down
- animated-group-zoom-in-left
- animated-group-zoom-in-right
- animated-group-zoom-in-up
- animated-group-zoom-out
- animated-group-zoom-out-down
- animated-group-zoom-out-left
- animated-group-zoom-out-right
- animated-group-zoom-out-up
- animated-group-hinge
- animated-group-roll-in
- animated-group-roll-out
- animated-group-roll-in-out
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)MIT
