Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix broken headings in Markdown files #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix broken headings in Markdown files #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#vue-animate
# vue-animate
*Cross-browser CSS3 animation library*

[![Version](https://img.shields.io/npm/v/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue-animate)
Expand All @@ -8,37 +8,37 @@ A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/

- **[DEMO](http://luoye.pw/vue-animate-demo/)** (courtesy of [luoye-fe](https://github.com/luoye-fe))

##Installation
####HTML
## Installation
#### HTML
Include the stylesheet:

```html
<head>
<link rel="stylesheet" href="vue-animate.min.css">
</head>
```
####npm
#### npm
If you're on webpack and using the [css-loader](https://github.com/webpack/css-loader "css loader"), you can use something like this:
```shell
npm install --save vue-animate
```
```js
require('vue-animate/dist/vue-animate.min.css')
```
####Less
#### Less
```less
@import "<PATH_TO_SOURCE>/src/vue-animate.less";
```

####Building
#### Building
```shell
git clone https://github.com/haydenbbickerton/vue-animate.git
cd vue-animate
npm install
npm run build #Compiled .css files go to the dist folder
```

##Usage
## Usage

Use [Vue.js transitions](http://vuejs.org/guide/transitions.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") **removing** the ***In/Out*** from the name.

Expand All @@ -48,7 +48,7 @@ Include the stylesheet:
```
enter/leave is already written in the stylesheet, so just remove *In/Out* from the name and you're golden.

####Custom Transition Classes
#### Custom Transition Classes
As of 0.0.3, Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes:

```js
Expand All @@ -66,17 +66,17 @@ Include the stylesheet:
})
```

####Supported Animations
#### Supported Animations
Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue-animate (aka - *what you can put in the transition="x"* attribute) as of right now:

#####Bounce
##### Bounce
* `bounce`
* `bounceDown`
* `bounceLeft`
* `bounceRight`
* `bounceUp`

#####Fade
##### Fade
* `fade`
* `fadeDown`
* `fadeDownBig`
Expand All @@ -87,20 +87,20 @@ Include the stylesheet:
* `fadeUp`
* `fadeUpBig`

#####Rotate
##### Rotate
* `rotate`
* `rotateDownLeft`
* `rotateDownRight`
* `rotateUpLeft`
* `rotateUpRight`

#####Slide
##### Slide
* `slideDown`
* `slideLeft`
* `slideRight`
* `slideUp`

#####Zoom
##### Zoom
* `zoom`
* `zoomDown`
* `zoomLeft`
Expand Down