react-number-easing
Advanced tools
+4
-1
@@ -0,1 +1,4 @@ | ||
| #0.0.3 | ||
| Added `delayValue` prop to delay the start of the animation. | ||
| #0.0.2 | ||
@@ -5,2 +8,2 @@ Added `userLocaleString` prop. Thanks @adjohu. | ||
| #0.0.1 | ||
| Initial release | ||
| Initial release |
+14
-3
@@ -18,3 +18,4 @@ 'use strict'; | ||
| ease: React.PropTypes.oneOf(Object.keys(eases)), | ||
| useLocaleString: React.PropTypes.bool | ||
| useLocaleString: React.PropTypes.bool, | ||
| delayValue: React.PropTypes.number | ||
| }, | ||
@@ -43,2 +44,4 @@ | ||
| componentWillReceiveProps: function componentWillReceiveProps(nextProps) { | ||
| var _this = this; | ||
| var value = parseInt(this.props.value, 10); | ||
@@ -52,4 +55,11 @@ | ||
| this.startAnimationTime = new Date().getTime(); | ||
| this.updateNumber(); | ||
| if (!isNaN(parseInt(this.props.delayValue, 10))) { | ||
| this.delayTimeout = setTimeout(function () { | ||
| _this.startAnimationTime = new Date().getTime(); | ||
| _this.updateNumber(); | ||
| }, this.props.delayValue); | ||
| } else { | ||
| this.startAnimationTime = new Date().getTime(); | ||
| this.updateNumber(); | ||
| } | ||
| }, | ||
@@ -85,2 +95,3 @@ | ||
| clearTimeout(this.timeout); | ||
| clearTimeout(this.delayTimeout); | ||
| }, | ||
@@ -87,0 +98,0 @@ |
+1
-1
| { | ||
| "name": "react-number-easing", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "React component for fancy transition for numbers.", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
+1
-0
@@ -27,2 +27,3 @@ # [React Number Easing](http://javierbyte.github.io/react-number-easing/) | ||
| * `[speed]`: How fast do you want to finish the animation? Defaults to 500ms. | ||
| * `[useLocaleString]`: Should use `toLocaleString()`? | ||
| * `[ease]`: The easing equation for the animation. Defaults to `quintInOut`. You can choose from [mattdesl/eases](https://github.com/mattdesl/eases/blob/master/index.js). | ||
@@ -29,0 +30,0 @@ |
+12
-3
@@ -11,3 +11,4 @@ var React = require('react'); | ||
| ease: React.PropTypes.oneOf(Object.keys(eases)), | ||
| useLocaleString: React.PropTypes.bool | ||
| useLocaleString: React.PropTypes.bool, | ||
| delayValue: React.PropTypes.number | ||
| }, | ||
@@ -44,4 +45,11 @@ | ||
| this.startAnimationTime = (new Date()).getTime(); | ||
| this.updateNumber(); | ||
| if (!isNaN(parseInt(this.props.delayValue, 10))) { | ||
| this.delayTimeout = setTimeout(() => { | ||
| this.startAnimationTime = (new Date()).getTime(); | ||
| this.updateNumber(); | ||
| }, this.props.delayValue); | ||
| } else { | ||
| this.startAnimationTime = (new Date()).getTime(); | ||
| this.updateNumber(); | ||
| } | ||
| }, | ||
@@ -77,2 +85,3 @@ | ||
| clearTimeout(this.timeout); | ||
| clearTimeout(this.delayTimeout); | ||
| }, | ||
@@ -79,0 +88,0 @@ |
660012
0.14%166
12.93%39
2.63%