animate-number

Number animation component for Vue. 一个基于Vue的数字滚动动画组件。
1,393
Install
npm install animate-number
Latest Version:0.0.2
Vue:2
License:MIT
Last Updated:Nov 15, 2019
Links: npm
Maintainer: apollozz

animate-number

基于 Vue 的数字滚动组件,支持小数 / 千分位,监听数值变化自动变化 👏

demo

安装 Install

# npm 
npm install animate-number

# yarn
yarn add animate-number

参数 Params

Property Property Type Default
value 数值 Number 0
during 动画时长(毫秒) Number 500
digits 小数位 Number 0
comma 是否使用千分位 Boolean false
fps 帧率 Number 20

使用 Using

1. 局部使用

import animateNumber from 'animate-number'
export default {
  name: 'app',
  components: {
    animateNumber
  },
  data () {
    return {
      value: 10000
    }
  }
}
<template>
    <div>
        <animate-number :value="value"></animate-number>
    </div>
</template>

2. 全局使用

// in main.js
import animateNumber from 'animate-number'
Vue.use(animateNumber)
<template>
    <div>
        <animate-number :value="value"></animate-number>
    </div>
</template>

Related Packages

animated-number-vue

A vue component with number animation

158,718 211
vue3-animate-onscroll

A simple Vue directive that animates elements as they scroll into view.

5,683
v-animate-css

Animate CSS for Vue.js 3

63,423 113
vue-animate-onscroll

A simple Vue directive that animates elements as they scroll into view.

18,044 116
@neeravp/vue-3-animate-in-view

Vue3 Directive & Component to animate elements as they appear in viewport

1,748 2

Version History

Version Released Vue License
0.0.2 ^2.5.11 MIT
0.0.1 ^2.5.11 MIT