Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue2-animate with all npm packages installed. Try it out:

vue2-animate lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("vue2-animate/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue2-animate v1.0.4

LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.

vue2-animate for Vue.js 2.0

Cross-browser CSS3 animation library

Version License

A Vue.js port of Animate.css. For use with Vue's built-in transitions.

This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0

##Installation ####HTML Include the stylesheet:

<head>
  <link rel="stylesheet" href="vue2-animate.min.css">
</head>

####npm If you're on webpack and using the css-loader, you can use something like this:

npm install --save vue2-animate
require('vue2-animate/dist/vue2-animate.min.css')

####Less

@import "<PATH_TO_SOURCE>/src/vue2-animate.less";

####Building

git clone https://github.com/asika32764/vue2-animate.git
cd vue2-animate
npm install
npm run build #Compiled .css files go to the dist folder

##Usage

Use Vue.js transitions as you normally would, but for the transition name you will use one of Animate.css animations removing the In/Out from the name.

For example, if I want to use fadeInLeft and fadeOutLeft on my element, I'll write:

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" v-bind:key="item">
        {{ item }}
    </li>
</transition-group>

enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.

####Custom Transition Classes

Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use Custom Transition Classes, you can either add -enter/-leave to the classes:

<transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</transition>

Or use the regular In/Out syntax:

<transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

####Supported Animations Not all Animate.css animations are supported at the moment. Here is a list of what's in vue2-animate (aka - what you can put in the transition="x" attribute) as of right now:

#####Bounce

  • bounce
  • bounceDown
  • bounceLeft
  • bounceRight
  • bounceUp

#####Fade

  • fade
  • fadeDown
  • fadeDownBig
  • fadeLeft
  • fadeLeftBig
  • fadeRight
  • fadeRightBig
  • fadeUp
  • fadeUpBig

#####Rotate

  • rotate
  • rotateDownLeft
  • rotateDownRight
  • rotateUpLeft
  • rotateUpRight

#####Slide

  • slideDown
  • slideLeft
  • slideRight
  • slideUp

#####Zoom

  • zoom
  • zoomDown
  • zoomLeft
  • zoomRight
  • zoomUp

License

MIT

Contributing

Pull requests are welcome :)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free