项目作者: moiamoia

项目描述 :
基于jquery的数字渐变组件
高级语言: JavaScript
项目地址: git://github.com/moiamoia/react-jquery-number-animate.git
创建时间: 2017-04-25T07:32:42Z
项目社区:https://github.com/moiamoia/react-jquery-number-animate

开源协议:

下载


Build Status

need jquery

yarn add jquery

<script src='XXX/jqury.min.js'></script>

#2.X USE

yarn add react-jquery-number-animate

  1. import Rnum from 'react-jquery-number-animate'
  2. <Rnum
  3. start={100}//起点,选填,默认0
  4. end={2017}//终点,默认为start的值
  5. duration={500}//动画时长,默认1000ms
  6. easing={'linear'}//可选,easing或linear,默认easing或linear
  7. format={true}//是否本地化数字(1000->1,000),
  8. dot={2},//默认0保留小数,暂会被format覆盖
  9. lazy={true}//默认false,懒加载
  10. />

v2.2 add

use your own label,but no lazy

  1. <Rnum
  2. end={100}
  3. >
  4. {re => <p>{re}</p>}
  5. </Rnum>

v2.1 add

  1. {/* <div>2017</div> */}
  2. <Rnum
  3. end={2017}//有end,取end的结果
  4. >
  5. <div>2000</div>
  6. </Rnum>
  1. {/* <div>2000</div> */}
  2. <Rnum>
  3. <div>2000</div>
  4. </Rnum>
  1. {/* <span>1000</span> */}
  2. <Rnum>
  3. 1000
  4. </Rnum>

1.x版本,2.x不兼容

yarn add react-jquery-number-animate@1.1.6

  1. import Rnum from 'react-jquery-number-animate'
  2. <Rnum sets={{
  3. start:100,//起点,选填,默认0
  4. end:1000,//终点,默认为start的值
  5. duration:1000,//动画时长,默认1000ms
  6. easing:'linear',//可选,easing或linear,默认easing或linear
  7. format:true,//是否本地化数字(1000->1,000),
  8. dot:2,//默认0,保留小数,暂会被format覆盖
  9. lazy:true,//默认false,懒加载
  10. }} />