asika32764 / vue-animate

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

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 [email protected]: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

vue-animate's Issues

No transitions working

Hi, I followed your example and got my transition working with bounceInLeft and bounceOutRight, but after that I tried using the other transitions and I found that none of them work. I am getting them from the list of supported animations.

Malformed css property

Hi,

I noticed a bug with the "make-transitions" mixin. The property animation-name is created with quotes and that is invalid css.

Here is a short gif showing the problem: GIF

To fix it, I simply removed the single quotes from the 4 animation-name property definitions.

Best regards,

Rui Freitas

--animate-* variables supports pre-define before css loaded

How do I set up duration of the animation????

Any help please

与ui框架内置的动画产生冲突，建议name能添加命名空间

我很喜欢使用vue2-animate，但它设置的过渡名称(name)实在太容易与其他模块产生冲突了，例如我使用的vant-ui框架里面的Toast提示，导致Toast提示弹出的时候产生强烈的抖动。由此，我建议name可以使用命名空间。

How can you control the time of the animation?

thanks

离开的动画为什么没效果啊，leave-active-class="slideOutDown"

any plan for stagger support?

Animation on page load

how to load an animation on page load?

Does it support Transition Modes?

https://vuejs.org/v2/guide/transitions.html#Transition-Modes

The link above is the official vue.js document for conversion mode.

Does not seem to be supported by vue2-animate, is this correct?

Is there any way I can use it?

v-show

Hi!
I'm trying to use with v-show:

`                    <transition
                            name="custom-classes-transition"
                            enter-active-class="bounceLeft-enter"
                            leave-active-class="bounceRight-leave" >
                           <div v-show="mode=='1'">
                               <componentName></componentName>    
                           </div>      
                        </transition>    `

Seems is not working.
Thanks in advance

animate.css always animate last element of array

ı want to animate first element of array when data push to array

Flippers

Hi,
Flippers are not in :

• flip
• flipInX
• flipOutX
• flipInY
• flipOutY

Thanks

Can I change transition speed?

Add animation helpers

Ref to material style anmation.scss mixins

装完项目就报css错误，axios，vuex等模块都被删掉了，重新安装之后 一直css-loader 报错

怎么解决，艹，项目崩了

How to use a different animation for enter and leave?

Quick question, how do you apply a different animation for enter and leave?

I'd like to fadeDown on enter and fadeUp for leave.

<transition name="fadeDown">
  <div> content here </div>
</transition>

Adjust to animation changes in [email protected]

Changes are described here - https://github.com/vuejs/vue/releases/tag/v2.1.8

建议

如果能控制动画参数会更好。

Vite + typescript import will load umd.js with undefined

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

Will be undefined now.

Use this instead before fixes:

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

Sass Version

Is there going to be an option for Sass as opposed to Less.

animation names different than animate.css?

Is there a reason why the animations are called differently compared to animate.css? I can't find fadeUp there, just fadeInUp or fadeOutUp.

Just asking out of curiousity.

Thanks!

Dynamic notice user to install dependency