/vue2-animate

A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.

Primary LanguageSCSSMIT LicenseMIT

vue2-animate

Cross-browser CSS3 animation library

Version License

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

Support for:

  • Vue 2.x
  • Vue 3.x
  • Alpine.js

Credit

I'm just project maintainer, any changes or request please open a Pull-Request.

Table of Content

Installation

HTML

Include the stylesheet:

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

Include by CDN:

<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>

NPM / Yarn

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

npm install --save vue2-animate

# OR

yarn add vue2-animate
require('vue2-animate/dist/vue2-animate.min.css')

SASS/SCSS

$animationDuration: 0.5s; // specify animation duration. Default value: 1s
@import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";

Less

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

NOTE LESS version is deprecated and no-longer maintained. Use SCSS version for your new project.

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.

You are able to build LESS version with command npm run build:less.

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" :key="item.id">
        {{ 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>

Custom Animation Duration

<transition name="fade">
  <p v-if="show" style="animation-duration: 0.3s">hello</p>
</transition>

Slide like Mobile

The view element must set position as absolute.

<transition
    enter-active-class="animated slideInRight"
    leave-active-class="animated slideOutLeft">
    <router-view appear :key="path"></router-view>
</transition>

Work with Alpine.js

Alpine x-transition must add enter and leave suffix, you have to add In and Out suffix after animation name.

<div x-show="open"
    x-transition:enter="fadeIn"
    x-transition:leave="fadeOut"
    style="animation-duration: .3s"
>...</div>

See also: https://github.com/alpinejs/alpine#x-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

Flip

  • flip
  • flipX
  • flipY

Rotate

  • rotate
  • rotateDownLeft
  • rotateDownRight
  • rotateUpLeft
  • rotateUpRight

Slide

  • slideDown
  • slideLeft
  • slideRight
  • slideUp

Zoom

  • zoom
  • zoomDown
  • zoomLeft
  • zoomRight
  • zoomUp

LightSpeed

  • lightSpeed

License

MIT