https://github.com/radical-dreamers/animated-vue
A plugin to use animate.css animations as Vue2 transitions
https://github.com/radical-dreamers/animated-vue
Last synced: 4 months ago
JSON representation
A plugin to use animate.css animations as Vue2 transitions
- Host: GitHub
- URL: https://github.com/radical-dreamers/animated-vue
- Owner: radical-dreamers
- License: mit
- Created: 2017-03-18T15:10:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-05-12T19:46:29.000Z (over 6 years ago)
- Last Synced: 2024-12-01T11:54:08.069Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 220
- Watchers: 9
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - animated-vue - A plugin to use animate.css animations as Vue2 transitions (UI Utilities [🔝](#readme))
- awesome-vue-zh - 动画-Vue - 一个Vue.js 2.x插件,可以轻松地将Animate.css动画用作过渡. 一样容易`<animated-tada>`! (UI实用程序 / 动画)
- awesome-vue - animated-vue - A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as `<animated-tada>`! (Components & Libraries / UI Utilities)
- awesome-vue - animated-vue ★182 - A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as `<animated-tada>`! (UI Utilities / Animation)
- awesome-vue - animated-vue - A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as `<animated-tada>`! (UI Utilities / Animation)
README
# animated-vue
A plugin to use animate.css animations as Vue2 transitions
> **Demo**: Coming soon!
## Installation and usage
Install **animated-vue** and **animate.css** from npm
`npm install --save animated-vue animate.css`
Import Vue and Animated Vue in your code, and register the plugin:
```javascript
import Vue from 'vue'
import AnimatedVue from 'animated-vue'
import 'animate.css/animate.css'
Vue.use(AnimatedVue)
```
### Using it without any build tool
If you want to use the library directly from your html pages, you should download the compiled version of animated-vue found in the dist folder and do something like this in your page:
```html
Vue.use(AnimatedVue);
// TODO: Add your app's init script.
```
## How to use
**Animated Vue** offers a series of functional components for Vue, enabling you to
use animate.css animations just as any other Vue component. This reduces the amount
of coding you need and makes your templates easier to read and reason about.
All built-in transitions are created to make sense with the original animation's
purpose. So, a *bounceIn* animation is set to play when a component **appears** while a
*fadeOut* animation is set to play, obviously, when a component **dissappears** from the
screen.
### Single component animations
Built-in animations are easy to use and fast to remember. For example, if you want
to give some part of your vue template a **jello** effect, you simply do:
```html
```
### List animations
**Animated Vue** leverages Vue's *transition-group* component to offer you the
very same transitions for a group of elements related to a **v-for** directive.
As you might have guessed, usage has also been simplified, but we also see the
introduction of a new attribute called "tag" ([Learn More](https://vuejs.org/v2/guide/transitions.html#List-Transitions)).
```html
```
The above template will render a "p" tag wrapping your list of rendered elements as
the base to play the animation on.
## What's included
**animated-vue** offers functional components for all of [Animate.css](https://daneden.github.io/animate.css/)
animations, as well as a simple framework for defining new ones.
All components follow the same naming convention:
```
Toggle Content
See my awesome animation
import CustomFadeInBounceOut from './custom-fade-in-bounce-out.js'
export default {
data () {
return {
showContent: false
}
},
components: {
'custom-fade-in-bounce-out': CustomFadeInBounceOut
},
methods: {
toggleContent: {
this.showContent = !this.showContent
}
}
}
```
Similarly, you can simply define a list transition using some animate.css animations
by changing the last parameter of the **GenericTransition** constructor to *true*. In this case, you
can also use the "tag" prop when using the component, so you can decide which tag is used when rendering
the element's animation.
```javascript
/**
* custom-group-fade-in-bounce-out.js
*/
import GenericTransition from 'animated-vue/src/common/generic-transition'
/**
* This is a group animation you can fill with a v-for block in your template
* @type {Object}
*/
export default new GenericTransition('custom-fade-in-bounce-out', 'fadeIn', 'bounceIn', true)
```
## License
MIT