ossphilippines / v-animate-css Goto Github PK

View Code? Open in Web Editor NEW

116.0 5.0 21.0 404 KB

The easiest to implement Vue directive for Animate.css

Home Page: https://v-animate-css.ossph.org/

License: MIT License

HTML 78.90% JavaScript 21.10%

css vue-directive vuejs hacktoberfest javascript

v-animate-css's Introduction

Vue Animate CSS

`v-animate-css`

Animate.css for Vue.js 3

If you like this project, please give it a star ⭐ and consider following the author 😉.

Vue 2 version is no longer maintained but the code is available here. You can still contribute if you wish so, and we will publish them for Vue 2.

Installation using NPM

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

OR

Installation using YARN

yarn add @ossph/v-animate-css

Or just import this to project without installing

Using CDN

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

Getting Started

Usage

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

Vue.use(VAnimateCss);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://unpkg.com/@ossph/v-animate-css/dist/v-animate-css.js"></script>

<script>
  Vue.use(VAnimateCss.default);
</script>

Injecting Alternative CSS Link (local or CDN)

Related to Issue#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.

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.

Made with ❤️ by Joff Tiquez

v-animate-css's People

Contributors

Stargazers

Watchers

v-animate-css's Issues

Avoid CDN dependencies

Hello.

We are using this beautiful package from an intranet enviroment (no internet access).

This package is using animate.css cdn internally. (internet resource)

Unfortunately this behavior make the package useless in this kind of enviroments.

I suggest to include the animate.css files built in to prevent the cdn call to internet.

Or allow the pacakge to inject the animate.css from outside. Like vuetify does with mdi icons.

Cheers.

issue after install

v-animate-css.js:293 Uncaught TypeError: Cannot read property 'scrollHeight' of null
at n (v-animate-css.js:293)

Programmatic animation?

Is there any way to animate an element programmatically? Ie, from a method within a Vue instance?

Demo page throw error on console. Snippets not working

Hello, I dared to modify your library

I had the need to modify your library. Thank you very much for the contribution.

Because I needed to pause an infinite loop add the following lines of code

if (!!betweenIteration) { let state = false; setInterval(function () { if (state == false) { el.classList.remove(classes); state = !state; } else { el.classList.add(classes); state = !state; } }, betweenIteration); }

I added these lines in line 188 of the dist/index.js file

not working on vue3

Is this updated to work in vue3? I installed and tried and no error comes up... but the directives doesn't create events.

Site not found

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

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

When deleting the DOM, there is no animation

How to animate when deleting the DOM