Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/haydenbbickerton/vue-animate
*UNSUPPORTED* (active fork @ https://github.com/asika32764/vue2-animate) Vue.js port of Animate.css
https://github.com/haydenbbickerton/vue-animate
Last synced: 13 days ago
JSON representation
*UNSUPPORTED* (active fork @ https://github.com/asika32764/vue2-animate) Vue.js port of Animate.css
- Host: GitHub
- URL: https://github.com/haydenbbickerton/vue-animate
- Owner: haydenbbickerton
- License: mit
- Created: 2016-04-02T19:06:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-28T15:26:35.000Z (about 7 years ago)
- Last Synced: 2024-10-06T01:47:08.190Z (about 1 month ago)
- Language: CSS
- Homepage:
- Size: 27.3 KB
- Stars: 188
- Watchers: 3
- Forks: 169
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-animate ★10
- awesome-vue - vue-animate - animate?style=social) - 跨浏览器CSS3动画库 (实用库)
- awesome-github-vue - vue-animate - 跨浏览器CSS3动画库 (实用库)
- awesome-github-vue - vue-animate - 跨浏览器CSS3动画库 (实用库)
- awesome - vue-animate - 跨浏览器CSS3动画库 (实用库)
README
#vue-animate
*Cross-browser CSS3 animation library*
[](https://www.npmjs.com/package/vue-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](http://luoye.pw/vue-animate-demo/)** (courtesy of [luoye-fe](https://github.com/luoye-fe))
##Installation
####HTML
Include the stylesheet:
```html
```
####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
@import "/src/vue-animate.less";
```
####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
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
hello
```
enter/leave is already written in the stylesheet, so just remove *In/Out* from the name and you're golden.
####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
Vue.transition('bounce', {
enterClass: 'bounceLeft-enter',
leaveClass: 'bounceRight-leave'
})
```
Or use the regular *In/Out* syntax:
```js
Vue.transition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
```
####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`
* `bounceDown`
* `bounceLeft`
* `bounceRight`
* `bounceUp`
#####Fade
* `fade`
* `fadeDown`
* `fadeDownBig`
* `fadeLeft`
* `fadeLeftBig`
* `fadeRight`
* `fadeRightBig`
* `fadeUp`
* `fadeUpBig`
#####Rotate
* `rotate`
* `rotateDownLeft`
* `rotateDownRight`
* `rotateUpLeft`
* `rotateUpRight`
#####Slide
* `slideDown`
* `slideLeft`
* `slideRight`
* `slideUp`
#####Zoom
* `zoom`
* `zoomDown`
* `zoomLeft`
* `zoomRight`
* `zoomUp`
# License
[MIT](http://opensource.org/licenses/MIT)
## Contributing
Pull requests are welcome :)