vue-animatecss-mixin
vuejs - document - css - animation
easy to use animate.css .
DEMO
online-preview https://cheere.github.io/vue-animatecss-mixin/
install
# npm
npm install vue-animatecss-mixin --save-devor
# yarn
yarn add vue-animatecss-mixin --devimport with bundler
import AnimateCssMixin from 'vue-animatecss-mixin'
export default {
mixins: [AnimateCssMixin],
}Usage
todo: need to improve...
have to
<p data-animation="heartBeat slower repeat-4 delay-1s">I'm animate.css demo</p> beforeDestory() {
this.animateRemoveAllListener(/*refs or targets*/)
}use animate.css
mounted() {
//-----------------play--------------------------
const refs = [ref0, ref1]
this.animatePlayground(refs)
}or
mounted() {
// ----------------get element-------------------
const target0 = this.animateGetTarget(/* .className */)
//-----------------play--------------------------
this.animatePlayground([target0])
}or
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)
}
