https://github.com/wangdahoo/vue-animate-number
animate-number as a vue component.
https://github.com/wangdahoo/vue-animate-number
Last synced: about 1 year ago
JSON representation
animate-number as a vue component.
- Host: GitHub
- URL: https://github.com/wangdahoo/vue-animate-number
- Owner: wangdahoo
- Created: 2017-04-10T05:58:50.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-07T09:21:38.000Z (almost 9 years ago)
- Last Synced: 2024-04-29T07:45:00.074Z (about 2 years ago)
- Language: HTML
- Homepage: https://wangdahoo.github.io/vue-animate-number/
- Size: 67.4 KB
- Stars: 106
- Watchers: 5
- Forks: 16
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animate Number
## [Demo](https://wangdahoo.github.io/vue-animate-number/)
## How to Use
#### install
```bash
$ npm install vue-animate-number
```
#### as a vue plugin
```js
import Vue from 'vue'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)
```
#### examples
```html
animate!
export default {
methods: {
formatter: function (num) {
return num.toFixed(2)
},
startAnimate: function () {
this.$refs.myNum.start()
}
}
}
```
> more `easing` effects: https://github.com/jeremyckahn/shifty/blob/master/src/easing-functions.js
> more examples: https://github.com/wangdahoo/vue-animate-number/blob/master/index.html
## API
```html
```
| prop name | type | description | default | required |
|-----|-----|-----|-----|-----|
| mode | string | `auto` or `manual`, trigger animation immediately or not | `auto` | N |
| from | number | value, at which animate starts | - | Y |
| to | number | value, at which animate ends | - | Y |
| fromColor | string | start color for gradient, in hex format | - | N |
| toColor | string | end color for gradient, in hex format | - | N |
| formatter | Function | value formatter for number in every step during the animation | `parseInt` | N |
| animateEnd | Function | callback after animation | - | N |