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-dev

or

  # yarn
  yarn add vue-animatecss-mixin --dev

import 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)
  }

Animate.css - document

• GitHub: https://github.com/animate-css/animate.css
• Doc: https://animate.style/