Need help with animated-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

radical-dreamers
218 Stars 23 Forks MIT License 40 Commits 4 Opened issues

Description

A plugin to use animate.css animations as Vue2 transitions

Services available

!
?

Need anything else?

Contributors list

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:





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:


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).


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:

Built in single component animations

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

Attention seekers

  • animated-bounce
  • animated-flash
  • animated-jello
  • animated-pulse
  • animated-rubber-band
  • animated-shake
  • animated-swing
  • animated-tada
  • animated-wobble

Bouncing entrances

  • animated-bounce-in
  • animated-bounce-in-left
  • animated-bounce-in-right
  • animated-bounce-in-up
  • animated-bounce-in-up

Bouncing exits

  • animated-bounce-out
  • animated-bounce-out-down
  • animated-bounce-out-left
  • animated-bounce-out-right
  • animated-bounce-out-up

Fading entrances

  • 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

Fading exits

  • 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

Flippers

  • animated-flip
  • animated-flip-in-x
  • animated-flip-in-y
  • animated-flip-out-x
  • animated-flip-out-y

Light speed

  • animated-light-speed-in
  • animated-light-speed-out

Rotating entrances

  • animated-rotate-in
  • animated-rotate-in-down-left
  • animated-rotate-in-down-right
  • animated-rotate-in-up-left
  • animated-rotate-in-up-right

Rotating exits

  • animated-rotate-out
  • animated-rotate-out-down-left
  • animated-rotate-out-down-right
  • animated-rotate-out-up-left
  • animated-rotate-out-up-right

Sliding entrances

  • animated-slide-in-down
  • animated-slide-in-left
  • animated-slide-in-right
  • animated-slide-in-up

Sliding exits

  • animated-slide-out-down
  • animated-slide-out-left
  • animated-slide-out-right
  • animated-slide-out-up

Zoom entrances

  • animated-zoom-in
  • animated-zoom-in-down
  • animated-zoom-in-left
  • animated-zoom-in-right
  • animated-zoom-in-up

Zoom exits

  • animated-zoom-out
  • animated-zoom-out-down
  • animated-zoom-out-left
  • animated-zoom-out-right
  • animated-zoom-out-up

Specials

  • animated-hinge
  • animated-roll-in
  • animated-roll-out
  • animated-roll-in-out

Built-in group component animations

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

Attention seekers

  • 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

Bouncing entrances

  • animated-group-bounce-in
  • animated-group-bounce-in-left
  • animated-group-bounce-in-right
  • animated-group-bounce-in-up
  • animated-group-bounce-in-up

Bouncing exits

  • animated-group-bounce-out
  • animated-group-bounce-out-down
  • animated-group-bounce-out-left
  • animated-group-bounce-out-right
  • animated-group-bounce-out-up

Fading entrances

  • 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

Fading exits

  • 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

Flippers

  • animated-group-flip
  • animated-group-flip-in-x
  • animated-group-flip-in-y
  • animated-group-flip-out-x
  • animated-group-flip-out-y

Light speed

  • animated-group-light-speed-in
  • animated-group-light-speed-out

Rotating entrances

  • 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

Rotating exits

  • 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

Sliding entrances

  • animated-group-slide-in-down
  • animated-group-slide-in-left
  • animated-group-slide-in-right
  • animated-group-slide-in-up

Sliding exits

  • animated-group-slide-out-down
  • animated-group-slide-out-left
  • animated-group-slide-out-right
  • animated-group-slide-out-up

Zoom entrances

  • animated-group-zoom-in
  • animated-group-zoom-in-down
  • animated-group-zoom-in-left
  • animated-group-zoom-in-right
  • animated-group-zoom-in-up

Zoom exits

  • animated-group-zoom-out
  • animated-group-zoom-out-down
  • animated-group-zoom-out-left
  • animated-group-zoom-out-right
  • animated-group-zoom-out-up

Specials

  • animated-group-hinge
  • animated-group-roll-in
  • animated-group-roll-out
  • animated-group-roll-in-out

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

  • /

  • 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

    We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.