Skip to content

Commit

Permalink
fix: update README
Browse files Browse the repository at this point in the history
  • Loading branch information
asika32764 committed Oct 21, 2023
1 parent 9c52509 commit 62a3a1e
Showing 1 changed file with 24 additions and 2 deletions.
26 changes: 24 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,42 @@ Support for:

## Installation

From NPM

```shell
npm i @asika32764/vue-animate --save

yarn add @asika32764/vue-animate
```

## Transitions
CDN

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

## Import

Import full animations.
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:
Expand Down

0 comments on commit 62a3a1e

Please sign in to comment.