• Stars
    star
    107
  • Rank 323,587 (Top 7 %)
  • Language
    HTML
  • Created over 7 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

animate-number as a vue component.

Animate Number

Demo

How to Use

install

$ npm install vue-animate-number

as a vue plugin

import Vue from 'vue'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

examples

<template>
  <div>
    <animate-number
      from="1" 
      to="10" 
      duration="1000" 
      easing="easeOutQuad"
      :formatter="formatter"
    ></animate-number>

    <!-- parseInt as default formatter -->
    <animate-number from="1" to="10"></animate-number>
    
    <!-- manually start animation by click -->
    <animate-number ref="myNum" from="0" to="10" mode="manual" :formatter="formatter"></animate-number><br>
    
    <button type="button" @click="startAnimate()"> animate! </button>
  </div>
</template>

<script>
  export default {
    methods: {
      formatter: function (num) {
        return num.toFixed(2)
      },

      startAnimate: function () {
        this.$refs.myNum.start()
      }
    }
  }
</script>

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

<animate-number 
  mode="auto"
  duration="1000"
  :from="from" 
  :to="to"
  from-color="#44CC00" 
  to-color="#ec4949"
  :formatter="formatter" 
  :animate-end="animateEnd">
</animate-number>
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

More Repositories

1

vonic

Mobile UI Components, based on Vue.js and ionic CSS. https://wangdahoo.github.io/vonic-documents
Vue
3,397
star
2

vue-scroller

Scroller Component for Vue.js
JavaScript
1,789
star
3

vue-progress

https://wangdahoo.github.io/vue-progress
JavaScript
161
star
4

vswipe

A Vue Swipe Component.
JavaScript
93
star
5

vonic-webpack-starter

A vonic starter with webpack template by vue-cli.
JavaScript
64
star
6

flask-element-starter

A python project starter equipped with flask and element-ui.
Vue
40
star
7

vue-scroller-demo

Vue
25
star
8

vonic-documents

vonic 2.0 documents site https://wangdahoo.github.io/vonic-documents
CSS
24
star
9

vonic-template

Webpack Template for Vonic.
JavaScript
13
star
10

simple-react-starter

CSS
11
star
11

JSBridge

Android WebView JavaScript Bridge. Inspired by marcuswestin's WebViewJavascriptBridge https://github.com/marcuswestin/WebViewJavascriptBridge
Java
11
star
12

virtual-dom

yet anthor virtual-dom.
JavaScript
5
star
13

map-state-vmodel

mapState for v-model
JavaScript
4
star
14

koa-rest-boilerplate

Koa restful boilerplate in typescript
TypeScript
4
star
15

list-diff

TypeScript
3
star
16

ionic-css

Ionic css components standalone.
CSS
3
star
17

redis-sharding

redis sharding via HashRing
JavaScript
3
star
18

gowork

Setup vscode golang development envionment quickly.
JavaScript
2
star
19

AbsoluteAdmin

HTML
2
star
20

vonic-webpack-code-splitting

vonic webpack code-splitting example
JavaScript
2
star
21

deque

double-ended queue.
JavaScript
1
star
22

wangdahoo.keys

1
star
23

von-app

Vue
1
star
24

script-error

JavaScript
1
star
25

create-element-app

1
star
26

vonic-doc

Deprecated. Please refer to https://github.com/wangdahoo/vonic-documents.
JavaScript
1
star
27

ngScroll

Scroller Component for Angular.js 1.x https://wangdahoo.github.io/ngScroll
JavaScript
1
star
28

ionic-sass

CSS
1
star
29

serve-https

JavaScript
1
star
30

swiper

JavaScript
1
star
31

zui

ZUI Framework
JavaScript
1
star
32

create-my-app

A simple project generator cli.
JavaScript
1
star
33

weui-less

CSS
1
star