vue-animate

Cross-browser CSS3 animation library, a port of animate.css for use with Vue.js transitions. DEMO

Support for:

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

Credit

• @haydenbbickerton is the original vue-animate (LESS) author (Only for Vue 1.x).
• @pavels-hyuna is v2 SCSS version author.

Table of Contents

• vue-animate
  • Credit
  • Table of Contents
  • Installation
  • Transitions
    • Custom Transition Classes
    • Custom Animation Properties
    • Slide as Mobile
  • Work with Alpine.js
  • Attentions Seekers
  • Options
  • Contribution Guide
    • Build Lib
    • Build Docs
    • Sync from animate.css

Installation

From NPM

npm i @asika32764/vue-animate --save

yarn add @asika32764/vue-animate

CDN

<link rel="stylesheet" href="https://www.unpkg.com/@asika32764/vue-animate/dist/vue-animate.min.css"/>

Import

Import animations for JS Bundler.

import '@asika32764/vue-animate/dist/vue-animate.css';

Import in CSS or SCSS file.

@import "@asika32764/vue-animate/dist/vue-animate.css";

/* If you want to override CSS variables, write it just after importing */
:root {
  --animate-duration: .3s;
  --animate-delay: 0;
}

Transitions

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

For example, if you want to use animate__animated animate__fadeInLeft and animate__fadeInLeft on your element, You could write:

<TransitionGroup name="fadeLeft" tag="ul">
    <li v-for="item in items" :key="item.id">
        {{ item }}
    </li>
</TransitionGroup>

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 Properties

<Transition name="fade">
  <p v-if="show" 
    style="--animate-duration: 0.3s; --animate-delay: 150; --animate-direction: reverse;"
  >hello</p>
</Transition>

Slide as Mobile

The view element must set position as absolute.

<Transition
    enter-active-class="position-absolute slideInRight"
    leave-active-class="position-absolute slideOutLeft">
    <router-view :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

Attentions Seekers

To use Attentions, vue-animate.css provides a set of JS functions.

import { bounce } from '@asika32764/vue-animate';
import { ref } from 'vue';

const el = ref<HTMLElement>();

bounce(el.value);

• DEMO
• Available Attentions Seekers

This function is very useful for adding some one-time animation to html element, for example, this is an incorrect password attentions.

import { headShake } from '@asika32764/vue-animate';

if (!await checkPassword()) {
  headShake(passwordInput.value);
}

Options

You could add animation properties to following parameters.

bounce(el.value, 300); // Durations 300ms
bounce(el.value, '.3s'); // Durations 0.3seconds
bounce(el.value, 300, { delay: 200 }); // Add duration and delay
bounce(el.value, { duration: 300, delay: 200 }); // Add duration and delay by options object

Option	Type	Description
duration	string, number	Can be any CSS valid duration value.
delay	string, number	Can be any CSS valid duration value.
iterationCount	string, number	The number of times to play.
direction	normal reverse alternate alternate-reverse	The animation playing direction.
fillMode	none forwards backwards both	The animation fill mode.

Contribution Guide

Clone project and install deps.

git clone git@github.com:asika32764/vue-animate.git
cd vue-animate
yarn install

Run:

yarn dev

Will launch a Vite dev server of the documentation site which the source file at src/docs. You can modify this site to test your code. (Do not push you test code.)

Build Lib

Run this command to build /dist files.

rollup -c

Build Docs

Run this command to build /docs files.

yarn build:docs

Sync from animate.css

This project is auto convert from animate.css animations, if animate.css release new animations, you can run this command to sync animations and auto generate source files.

yarn generate