vue-countup-directive

NPM

Thanks @inorganik for create countUp.js

Installation

``npm install --save vue-countup-directive`

Setup Vue Project

##### (directives/countup.js)
`
import Vue from 'vue'
import options from 'vue-countup-directive'

Vue.directive('countUp', options)
`

Setup Nuxt Project


##### (~/plugins/countUp.js)
`
import Vue from 'vue'
import options from 'vue-countup-directive'

Vue.directive('countUp', options)
`
##### (nuxt.config.js)
`
plugins: [
...
{ src: '~plugins/countUp.js', ssr: false }
],
`

Usage

This directive can be used with countUp.js options.

You can include the number of decimals and the animation duration (seconds) at the options paramater. The default is `{ options: { decimals: 0, duration: 2 } }`

The Animation runs once if you set a once modifier at the directive otherwise the animation always run after the conditions passed.

> onClassChange

Create an interval that watches for the class changes at element or the watchedElement (defined by watchedElId parameter)

If once modifier is setted the interval will be clear after once animation

$3

Once
`

`

Many times
`

`

Look for changes at another element
`
Watched Element


`

With decimals
`

`

> onWindowScroll

Create a window scroll listener.

The animation runs if the position Y of window scroll is bigger than or equals watched element position (passed at the watchedElId parameter).

If not passed watchedElId, the own element will be setted like the watchedElId

$3

Once
`
Watched Element


`

Many Times
`
Watched Element


`

No watchedElId passed
`

`

With decimals
`

`

No Arg

Start a countUp animation immediately

`

``