Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asika32764/vue-animate
A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
https://github.com/asika32764/vue-animate
animation transition transition-animation vue vue-animate vue-transition vue2 vue3 vuejs vuejs2
Last synced: about 1 month ago
JSON representation
A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
- Host: GitHub
- URL: https://github.com/asika32764/vue-animate
- Owner: asika32764
- License: other
- Fork: true (haydenbbickerton/vue-animate)
- Created: 2016-10-08T08:58:20.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-03-25T07:57:28.000Z (8 months ago)
- Last Synced: 2024-05-29T03:13:53.650Z (6 months ago)
- Topics: animation, transition, transition-animation, vue, vue-animate, vue-transition, vue2, vue3, vuejs, vuejs2
- Language: CSS
- Homepage: https://vue-animate.simular.co/
- Size: 473 KB
- Stars: 1,355
- Watchers: 17
- Forks: 132
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-animate
[](https://www.npmjs.com/package/@asika32764/vue-animate)
[](LICENSE)
Cross-browser CSS3 animation library, a port of animate.css for use with Vue.js transitions. [DEMO](https://vue-animate.simular.co/)
Support for:
- Vue 2.x
- Vue 3.x
- Alpine.js
## Credit
- [@haydenbbickerton](https://github.com/haydenbbickerton/vue-animate) is the original [vue-animate (LESS)](https://github.com/haydenbbickerton/vue-animate) author (Only for Vue 1.x).
- [@pavels-hyuna](https://github.com/pavels-hyuna) is v2 SCSS version author.
## Table of Contents
* [vue-animate](#vue-animate)
* [Credit](#credit)
* [Table of Contents](#table-of-contents)
* [Installation](#installation)
* [Transitions](#transitions)
* [Custom Transition Classes](#custom-transition-classes)
* [Custom Animation Properties](#custom-animation-properties)
* [Slide as Mobile](#slide-as-mobile)
* [Work with Alpine.js](#work-with-alpinejs)
* [Attentions Seekers](#attentions-seekers)
* [Options](#options)
* [Contribution Guide](#contribution-guide)
* [Build Lib](#build-lib)
* [Build Docs](#build-docs)
* [Sync from animate.css](#sync-from-animatecss)
## Installation
From NPM
```shell
npm i @asika32764/vue-animate --save
yarn add @asika32764/vue-animate
```
CDN
```html
```
## Import
Import animations for JS Bundler.
```ts
import '@asika32764/vue-animate/dist/vue-animate.css';
```
Import in CSS or SCSS file.
```css
@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](https://vuejs.org/guide/built-ins/transition.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://animate.style/#utilities "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:
```html
{{ item }}
```
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](https://vuejs.org/guide/built-ins/transition.html#css-based-transitions "Custom Transition Classes"), you can either add *-enter/-leave* to the classes:
```html
hello
```
Or use the regular *In/Out* syntax:
```html
hello
```
### Custom Animation Properties
```html
hello
```
### Slide as Mobile
The view element must set position as absolute.
```
```
## Work with Alpine.js
Alpine `x-transition` must add `enter` and `leave` suffix, you have to add `In` and `Out` suffix after animation name.
```html
```
See also: https://github.com/alpinejs/alpine#x-transition
## Attentions Seekers
To use Attentions, vue-animate.css provides a set of JS functions.
```ts
import { bounce } from '@asika32764/vue-animate';
import { ref } from 'vue';
const el = ref();
bounce(el.value);
```
- [DEMO](https://vue-animate.simular.co/#attentions)
- [Available Attentions Seekers](https://github.com/asika32764/vue-animate.css/tree/main/src/attentions)
This function is very useful for adding some one-time animation to html element, for example,
this is an incorrect password attentions.
```ts
import { headShake } from '@asika32764/vue-animate';
if (!await checkPassword()) {
headShake(passwordInput.value);
}
```
## Options
You could add animation properties to following parameters.
```ts
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.
```shell
git clone [email protected]:asika32764/vue-animate.git
cd vue-animate
yarn install
```
Run:
```shell
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.
```shell
rollup -c
```
### Build Docs
Run this command to build `/docs` files.
```shell
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.
```shell
yarn generate
```