项目作者: tugayilik

项目描述 :
Zero dependency, simple animated-like number iteration directive for vue components
高级语言: JavaScript
项目地址: git://github.com/tugayilik/vue-number-transition-directive.git
创建时间: 2018-05-20T19:12:03Z
项目社区:https://github.com/tugayilik/vue-number-transition-directive

开源协议:MIT License

下载


vue-number-transition-directive

Zero dependency, simple animated-like number iteration directive for vue components

Install

via npm

  1. npm install vue-number-transition

via unpkg

  1. https://unpkg.com/vue-number-transition@1.0.0/src/index.js

Usage

First import the directive and bind it to component’s directives.

  1. import NumberTransition from 'vue-number-transition';
  2. export default {
  3. directives: {
  4. // ..
  5. NumberTransition
  6. // ..
  7. }
  8. }

Then bind the directive on your target element;

  1. <div id="count" v-number-transition="{ target: 500, iteration: 10, speed: 1000 }">

Parameters

target: The number that directive will count to. Can be computed property too.

iteration: The number of iterations until counter reaches to target number.

Example
If you want to reach from 0 to 500 and iteration is 10, it will be increasing 50 by 50 (target/iteration) until 500.

speed: speed and iteration works together. The result of speed / iteration defines the interval speed between changes.