https://jofftiquez.github.io/v-animate-css

The easiest to implement Vue directive for Animate.css
https://jofftiquez.github.io/v-animate-css

css hacktoberfest javascript vue-directive vuejs

Last synced: 4 months ago
JSON representation

The easiest to implement Vue directive for Animate.css

• Host: GitHub
• URL: https://jofftiquez.github.io/v-animate-css
• Owner: OSSPhilippines
• License: mit
• Created: 2017-10-23T08:36:11.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2023-10-07T07:30:48.000Z (about 1 year ago)
• Last Synced: 2024-05-01T09:42:56.231Z (8 months ago)
• Topics: css, hacktoberfest, javascript, vue-directive, vuejs
• Language: HTML
• Homepage: https://v-animate-css.ossph.org/
• Size: 395 KB
• Stars: 114
• Watchers: 5
• Forks: 21
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-pinoy-made - Website
• awesome-vue - v-animate-css - The easiest to implement Vue 2 directive for Animate.css (Components & Libraries / UI Utilities)
• awesome-vue - v-animate-css
• awesome-vue - v-animate-css - The easiest to implement Vue 2 directive for Animate.css (UI Utilities / Animation)
• awesome-vue - v-animate-css - The easiest to implement Vue 2 directive for Animate.css (UI Utilities / Animation)
• awesome-vue-zh - V-动画,CSS - 最容易为Animate.css实现Vue 2指令 (UI实用程序 / 动画)

README

        
# **Vue Animate CSS**

![GitHub forks](https://img.shields.io/github/forks/ossphilippines/v-animate-css?style=for-the-badge) ![GitHub Repo stars](https://img.shields.io/github/stars/ossphilippines/v-animate-css?style=for-the-badge)

### `v-animate-css`

Animate.css for Vue.js 3

If you like this project, please give it a star :star: and consider following the author :octocat: :wink:.

> Vue 2 version is no longer maintained but [the code is available here](https://github.com/OSSPhilippines/v-animate-css/tree/version/vue-2). You can still contribute if you wish so, and we will publish them for Vue 2.

### Installation using **NPM** 

```shell

npm install @ossph/v-animate-css --save

```

### OR

### Installation using **YARN** 

```shell

yarn add @ossph/v-animate-css

```

### Or just **import** this to project without installing

### Using **CDN** 

```script

https://unpkg.com/@ossph/v-animate-css/dist/v-animate-css.js

```

## **Getting Started**

### **Usage**

```javascript

import Vue from 'vue';

import VAnimateCss from '@ossph/v-animate-css';

Vue.use(VAnimateCss);

```

```html

  Vue.use(VAnimateCss.default);

```

### **Injecting Alternative CSS Link (local or CDN)**

Related to [Issue#33](https://github.com/OSSPhilippines/v-animate-css/issues/33) it make sense to give the user the option to add their own local version of Animate.css instead of relying to the default CDN version of Animate.css within the plugin.

You can do it using the new animateCSSPath option.

```js

import Vue from 'vue';

import VAnimateCss from '@ossph/v-animate-css';

Vue.use(VAnimateCss, { animateCSSPath: './local-animate-css-file.css' });

// You can also use this option to inject a newer version of Animate.css

Vue.use(VAnimateCss, { animateCSSPath: 'cdn-link-to-a-newer-animate-css-version' });

```

Demo and Docs [here](https://ossphilippines.github.io/v-animate-css/). 

Made with :heart: by [Joff Tiquez](https://github.com/jofftiquez)