https://github.com/cheere/vue-animatecss-mixin
vue Animate.css
https://github.com/cheere/vue-animatecss-mixin
animate-css nuxt vue2
Last synced: about 2 months ago
JSON representation
vue Animate.css
- Host: GitHub
- URL: https://github.com/cheere/vue-animatecss-mixin
- Owner: cheere
- License: mit
- Created: 2020-10-22T08:07:51.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-30T05:52:34.000Z (over 5 years ago)
- Last Synced: 2025-02-23T22:15:32.503Z (over 1 year ago)
- Topics: animate-css, nuxt, vue2
- Language: JavaScript
- Homepage: https://cheere.github.io/vue-animatecss-mixin/
- Size: 922 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-animatecss-mixin
[vuejs - document - css - animation](https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB)
easy to use animate.css .
## DEMO
online-preview https://cheere.github.io/vue-animatecss-mixin/
## install
```sh
# npm
npm install vue-animatecss-mixin --save-dev
```
or
```sh
# yarn
yarn add vue-animatecss-mixin --dev
```
### import with bundler
```js
import AnimateCssMixin from 'vue-animatecss-mixin'
export default {
mixins: [AnimateCssMixin],
}
```
## Usage
todo: need to improve...
#### have to
```html
I'm animate.css demo
```
```js
beforeDestory() {
this.animateRemoveAllListener(/*refs or targets*/)
}
```
#### use animate.css
```js
mounted() {
//-----------------play--------------------------
const refs = [ref0, ref1]
this.animatePlayground(refs)
}
```
or
```js
mounted() {
// ----------------get element-------------------
const target0 = this.animateGetTarget(/* .className */)
//-----------------play--------------------------
this.animatePlayground([target0])
}
```
or
```js
mounted() {
// ----------------get element-------------------
const target0 = this.animateGetTarget(/* .className */))
// or
const target1 = this.animateGetTarget(/* #id */))
// or
const target2 = this.animateGetTarget(/* ref */)
// const target2 = ref
//-----------------play--------------------------
const targets = [target0, target1, taget2]
this.animatePlayground(targets)
}
```
## Animate.css - document
- GitHub: https://github.com/animate-css/animate.css
- Doc: https://animate.style/