vue2-animate
Cross-browser CSS3 animation library
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
- @haydenbbickerton is the origin vue-animate (LESS) author (Only for Vue 1.x).
- @pavels-hyuna is SCSS version author.
I'm just project maintainer, any changes or request please open a Pull-Request.
Table of Content
- Table of Content
- Installation
- SASS/SCSS
- Less
- Building
- Usage
- Supported Animations
- License
- Contributing
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-animaterequire('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
bouncebounceDownbounceLeftbounceRightbounceUp
Fade
fadefadeDownfadeDownBigfadeLeftfadeLeftBigfadeRightfadeRightBigfadeUpfadeUpBig
Flip
flipflipXflipY
Rotate
rotaterotateDownLeftrotateDownRightrotateUpLeftrotateUpRight
Slide
slideDownslideLeftslideRightslideUp
Zoom
zoomzoomDownzoomLeftzoomRightzoomUp
LightSpeed
lightSpeed