214 lines
5.1 KiB
Markdown
214 lines
5.1 KiB
Markdown
# vue2-animate for Vue.js 2
|
|
|
|
*Cross-browser CSS3 animation library*
|
|
|
|
[](https://www.npmjs.com/package/vue2-animate)
|
|
[](LICENSE)
|
|
|
|
A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. | [DEMO](https://the-allstars.com/vue2-animate/)
|
|
|
|
## Credit
|
|
|
|
- [@haydenbbickerton](https://github.com/haydenbbickerton/vue-animate) is the origin [vue-animate (LESS)](https://github.com/haydenbbickerton/vue-animate) author (Only for Vue 1.x).
|
|
- [@pavels-hyuna](https://github.com/pavels-hyuna) is SCSS version author.
|
|
|
|
I'm just project maintainer, any changes or request please open a Pull-Request.
|
|
|
|
## Table of Content
|
|
|
|
<!-- TOC -->
|
|
|
|
- [Table of Content](#table-of-content)
|
|
- [Installation](#installation)
|
|
- [HTML](#html)
|
|
- [NPM / Yarn](#npm--yarn)
|
|
- [SASS/SCSS](#sassscss)
|
|
- [Less](#less)
|
|
- [Building](#building)
|
|
- [Usage](#usage)
|
|
- [Custom Transition Classes](#custom-transition-classes)
|
|
- [Custom Animation Duration](#custom-animation-duration)
|
|
- [Supported Animations](#supported-animations)
|
|
- [Bounce](#bounce)
|
|
- [Fade](#fade)
|
|
- [Flip](#flip)
|
|
- [Rotate](#rotate)
|
|
- [Slide](#slide)
|
|
- [Zoom](#zoom)
|
|
- [LightSpeed](#lightSpeed)
|
|
- [License](#license)
|
|
- [Contributing](#contributing)
|
|
|
|
<!-- /TOC -->
|
|
|
|
## Installation
|
|
|
|
### HTML
|
|
|
|
Include the stylesheet:
|
|
|
|
```html
|
|
<head>
|
|
<link rel="stylesheet" href="vue2-animate.min.css">
|
|
</head>
|
|
```
|
|
|
|
Include by CDN:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
|
|
```
|
|
|
|
### NPM / Yarn
|
|
|
|
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 vue2-animate
|
|
|
|
# OR
|
|
|
|
yarn add vue2-animate
|
|
```
|
|
|
|
```js
|
|
require('vue2-animate/dist/vue2-animate.min.css')
|
|
```
|
|
|
|
## SASS/SCSS
|
|
|
|
```scss
|
|
$animationDuration: 0.5s; // specify animation duration. Default value: 1s
|
|
@import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";
|
|
```
|
|
|
|
## Less
|
|
|
|
```less
|
|
@import "<PATH_TO_SOURCE>/src/less/vue2-animate.less";
|
|
```
|
|
|
|
> **NOTE** LESS version is deprecated and no-longer maintained. Use SCSS version for your new project.
|
|
|
|
## Building
|
|
|
|
```shell
|
|
git clone https://github.com/asika32764/vue2-animate.git
|
|
cd vue2-animate
|
|
npm install
|
|
npm run build #Compiled .css files go to the dist folder.
|
|
```
|
|
|
|
You are able to build LESS version with command `npm run build:less`.
|
|
|
|
## 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.
|
|
|
|
For example, if I want to use *fadeInLeft* and *fadeOutLeft* on my element, I'll write:
|
|
|
|
```html
|
|
<transition-group name="fadeLeft" tag="ul">
|
|
<li v-for="item in items" :key="item.id">
|
|
{{ item }}
|
|
</li>
|
|
</transition-group>
|
|
```
|
|
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](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes:
|
|
|
|
```html
|
|
<transition
|
|
name="custom-classes-transition"
|
|
enter-active-class="bounceLeft-enter"
|
|
leave-active-class="bounceRight-leave"
|
|
>
|
|
<p v-if="show">hello</p>
|
|
</transition>
|
|
```
|
|
Or use the regular *In/Out* syntax:
|
|
|
|
```html
|
|
<transition
|
|
name="bounce"
|
|
enter-active-class="bounceInLeft"
|
|
leave-active-class="bounceOutRight"
|
|
>
|
|
<p v-if="show">hello</p>
|
|
</transition>
|
|
```
|
|
|
|
### Custom Animation Duration
|
|
|
|
```html
|
|
<transition name="fade">
|
|
<p v-if="show" style="animation-duration: 0.3s">hello</p>
|
|
</transition>
|
|
```
|
|
|
|
### Slide like Mobile
|
|
|
|
The view element must set position as absolute.
|
|
|
|
```
|
|
<transition
|
|
enter-active-class="animated slideInRight"
|
|
leave-active-class="animated slideOutLeft">
|
|
<router-view appear :key="path"></router-view>
|
|
</transition>
|
|
```
|
|
|
|
## 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 vue2-animate (aka - *what you can put in the transition="x"* attribute) as of right now:
|
|
|
|
### Bounce
|
|
* `bounce`
|
|
* `bounceDown`
|
|
* `bounceLeft`
|
|
* `bounceRight`
|
|
* `bounceUp`
|
|
|
|
### Fade
|
|
* `fade`
|
|
* `fadeDown`
|
|
* `fadeDownBig`
|
|
* `fadeLeft`
|
|
* `fadeLeftBig`
|
|
* `fadeRight`
|
|
* `fadeRightBig`
|
|
* `fadeUp`
|
|
* `fadeUpBig`
|
|
|
|
### Flip
|
|
* `flip`
|
|
* `flipX`
|
|
* `flipY`
|
|
|
|
### Rotate
|
|
* `rotate`
|
|
* `rotateDownLeft`
|
|
* `rotateDownRight`
|
|
* `rotateUpLeft`
|
|
* `rotateUpRight`
|
|
|
|
### Slide
|
|
* `slideDown`
|
|
* `slideLeft`
|
|
* `slideRight`
|
|
* `slideUp`
|
|
|
|
### Zoom
|
|
* `zoom`
|
|
* `zoomDown`
|
|
* `zoomLeft`
|
|
* `zoomRight`
|
|
* `zoomUp`
|
|
### LightSpeed
|
|
* `lightSpeed`
|
|
## License
|
|
|
|
[MIT](http://opensource.org/licenses/MIT)
|